Flutter beyond Hello world talk

1. Flutter Beyond Hello world! By : Ahmed Abu Eldahab @dahabdev

2. Ahmed Abu Eldahab Senior Technical Consultant Google Developer Expert in Flutter /Dahabdev @dahabdev

3. Tell me about you? Developers , Designers , Mac , Linux , Windows , Web , Mobile , Android , ios ? @dahabdev

4. Mobile Development Approaches

5. Flutter Approach Canvas Events Location Bluetooth Camera Sensors Native ARM Binary Code Services Platform Channels Flutter Widgets Cupertino Material Design

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. Build beautiful apps in record time

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. Flutter support many types of Animations - Tween - Hero - Sliver - Transform - FadeInWidget - Animation Builder - AnimatedOpacity - Physics-based animation Beautiful Animations

10. Fast Brings the power of a games engine to user experience development 60fps, GPU accelerated Compiled to native machine code

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

13. Flutter Architecture

14. Flutter Architecture

15. ● 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)?

16. Everything is a Widget

17. Everything is a Widget

18. 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

19. 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()

20. Flutter Widgets

21. Flutter Widgets

22. Flutter Widgets

23. Flutter Widgets

24. Flutter Widgets

25. Flutter Widgets

26. Flutter Widgets

27. Flutter Widgets

28. Flutter Widgets

29. Flutter Widgets

30. Flutter Widgets

31. Flutter Widgets

32. Flutter Widgets

33. Flutter Widgets

34. Stateless Widget Constructor Function build() Stateful Widget Constructor Function build() initState() setState() build() didUpdateWidget() dispose() Flutter Widgets

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. 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

37. 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

38. Flutter Widgets Rebuilds frequently Element Tree Render TreeWidget Tree Rarely rebuilds Rarely rebuilds Container ElementContainer Column Column Element Rendered Box Rendered Box

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

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

48. Flutter Widgets https://www.youtube.com/watch?v=kn0EOS-ZiIc

49. Data Flow Data (State) User Interface @dahabdev

50. Data (State)

51. Data (State)

52. Data (State)

53. Data (State)

54. Data (State) Dependency injection

55. Data (State) Dependency injection

56. Flutter Widgets Data

57. Flutter Widgets Data

58. InheritedWidget Data (State )Management

59. InheritedWidget Data (State )Management

60. Data (State )Management

65. Provider Data (State )Management

66. Data (State )Management https://pub.dev/packages/provider

67. Scoped Model Data (State )Management

68. Data (State )Management https://pub.dev/packages/scoped_model

69. Bloc Data (State )Management

70. Data (State )Management https://pub.dev/packages/bloc

71. Redux Data (State )Management

72. Data (State )Management https://pub.dev/packages/flutter_redux

73. Mobx Data (State )Management

74. Data (State )Management https://pub.dev/packages/flutter_mobx

75. Data (State )Management https://pub.dev/packages/fish_redux

77. Streams

85. Data (State )Management 1. Scoped_model 2. Provider 3. Bloc 4. Mobx 5. Redux

86. Design Patterns

87. Directory structure

88. Flutter Design Patterns

89. Flutter Design Patterns

90. Flutter Design Patterns https://github.com/brianegan/flutter_architecture_samples http://fluttersamples.com

91. Thanks

92. Ahmed Abu Eldahab Senior Technical Consultant Google Developer Expert in Flutter /Dahabdev

Flutter beyond Hello world talk

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Flutter beyond Hello world talk

Semelhante a Flutter beyond Hello world talk (20)

Mais de Ahmed Abu Eldahab

Mais de Ahmed Abu Eldahab (20)

Último

Último (20)

Flutter beyond Hello world talk