Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Flutter beyond Hello world talk

737 views

Published on

In this talk, I covered some Advanced Flutter features like State Management, Streams, Flutter Desing Patterns, Render Object, Render Tree

Published in: Technology

Flutter beyond Hello world talk

  1. 1. Flutter Beyond Hello world! By : Ahmed Abu Eldahab @dahabdev
  2. 2. Ahmed Abu Eldahab Senior Technical Consultant Google Developer Expert in Flutter /Dahabdev @dahabdev
  3. 3. Tell me about you? Developers , Designers , Mac , Linux , Windows , Web , Mobile , Android , ios ? @dahabdev
  4. 4. Mobile Development Approaches
  5. 5. Flutter Approach Canvas Events Location Bluetooth Camera Sensors Native ARM Binary Code Services Platform Channels Flutter Widgets Cupertino Material Design
  6. 6. What makes Flutter unique? - Compiles to Native Code (ARM Binary code) - No reliance on OEM widgets - No bridge needed - No markup language (only Dart)
  7. 7. Build beautiful apps in record time
  8. 8. Control every pixel on the screen Make your brand come to life Never say "no" to your designer Stand out in the marketplace Win awards with beautiful UI Expressive, beautiful UIs
  9. 9. Flutter support many types of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations
  10. 10. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code
  11. 11. Sub-second reload times Paint your app to life Iterate rapidly on features Test hypotheses quicker than ever More time to experiment & test features Single-codebase for faster collab 3X Productivity Gains Productive
  12. 12. Flutter Architecture
  13. 13. Flutter Architecture
  14. 14. ● Language and Libraries ● Packages manager https://pub.dev ● Virtual machine ● Compile to Javascript dart2js Dart is a client-optimized language for fast apps on any platform! (Web - Desktop - Mobile - Embedded)?
  15. 15. Everything is a Widget
  16. 16. Everything is a Widget
  17. 17. Everything is a Widget Stateless Widget is immutable widget doesn’t know anything & Gets render only once or when the parent widget changes the configuration
  18. 18. Everything is a Widget Stateful Widget is mutable widget which has its own properties knowing as state and it can be changed by user input or by using setState()
  19. 19. Flutter Widgets
  20. 20. Flutter Widgets
  21. 21. Flutter Widgets
  22. 22. Flutter Widgets
  23. 23. Flutter Widgets
  24. 24. Flutter Widgets
  25. 25. Flutter Widgets
  26. 26. Flutter Widgets
  27. 27. Flutter Widgets
  28. 28. Flutter Widgets
  29. 29. Flutter Widgets
  30. 30. Flutter Widgets
  31. 31. Flutter Widgets
  32. 32. Flutter Widgets
  33. 33. Stateless Widget Constructor Function build() Stateful Widget Constructor Function build() initState() setState() build() didUpdateWidget() dispose() Flutter Widgets
  34. 34. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Text Column Element Text Element Rendered Box Rendered Box Rendered Box
  35. 35. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Text Column Element Text Element Rendered Box Rendered Box Rendered Box
  36. 36. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Column Element Text Element Rendered Box Rendered Box Rendered Box
  37. 37. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Column Element Rendered Box Rendered Box
  38. 38. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
  39. 39. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
  40. 40. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
  41. 41. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
  42. 42. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box
  43. 43. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
  44. 44. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
  45. 45. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
  46. 46. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column List Column Element List Element Rendered Box Rendered Box Rendered Box Unique Key Unique Key
  47. 47. Flutter Widgets https://www.youtube.com/watch?v=kn0EOS-ZiIc
  48. 48. Data Flow Data (State) User Interface @dahabdev
  49. 49. Data (State)
  50. 50. Data (State)
  51. 51. Data (State)
  52. 52. Data (State)
  53. 53. Data (State) Dependency injection
  54. 54. Data (State) Dependency injection
  55. 55. Flutter Widgets Data
  56. 56. Flutter Widgets Data
  57. 57. InheritedWidget Data (State )Management
  58. 58. InheritedWidget Data (State )Management
  59. 59. Data (State )Management
  60. 60. Data (State )Management
  61. 61. Data (State )Management
  62. 62. Data (State )Management
  63. 63. Data (State )Management
  64. 64. Provider Data (State )Management
  65. 65. Data (State )Management https://pub.dev/packages/provider
  66. 66. Scoped Model Data (State )Management
  67. 67. Data (State )Management https://pub.dev/packages/scoped_model
  68. 68. Bloc Data (State )Management
  69. 69. Data (State )Management https://pub.dev/packages/bloc
  70. 70. Redux Data (State )Management
  71. 71. Data (State )Management https://pub.dev/packages/flutter_redux
  72. 72. Mobx Data (State )Management
  73. 73. Data (State )Management https://pub.dev/packages/flutter_mobx
  74. 74. Data (State )Management https://pub.dev/packages/fish_redux
  75. 75. Data (State )Management
  76. 76. Streams
  77. 77. Data (State )Management
  78. 78. Data (State )Management 1. Scoped_model 2. Provider 3. Bloc 4. Mobx 5. Redux
  79. 79. Design Patterns
  80. 80. Directory structure
  81. 81. Flutter Design Patterns
  82. 82. Flutter Design Patterns
  83. 83. Flutter Design Patterns https://github.com/brianegan/flutter_architecture_samples http://fluttersamples.com
  84. 84. Thanks
  85. 85. Ahmed Abu Eldahab Senior Technical Consultant Google Developer Expert in Flutter /Dahabdev

×