My Flutter talk at GDG Alexandria Devfest Event

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

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

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

4. Flutter is Google’s UI toolkit
for building beautiful,
natively compiled
applications for mobile, web,
and desktop from a single
codebase

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

6. Flutter support many types of
Animations
- Tween
- Hero
- Sliver
- Transform
- FadeInWidget
- Animation Builder
- AnimatedOpacity
- Physics-based animation
Beautiful Animations

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

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

10. Flutter Architecture

11. Flutter Architecture

12. What makes Flutter unique?
- Compiles to Native Code (ARM Binary code)
- No reliance on OEM widgets
- No bridge needed
- No markup language (only Dart)

13. https://www.youtube.com/c/DahabIT

14. Everything is a Widget

15. Everything is a Widget

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

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

18. Flutter Widgets

19. Flutter Widgets

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. Stateless Widget
Constructor Function
build()
Stateful Widget
Constructor Function
build()
initState()
setState()
build()
didUpdateWidget()
dispose()
Flutter Widgets

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

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

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

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

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

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. 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. 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. Flutter Widgets
https://www.youtube.com/watch?v=kn0EOS-ZiIc

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

48. Data (State)

49. Data (State)

50. Data (State)

51. Data (State)

52. Data (State)
Dependency
injection

53. Data (State)
Dependency
injection

54. Flutter Widgets

55. Flutter Widgets
Data

56. Flutter Widgets
Data

57. InheritedWidget
Data (State )Management

58. InheritedWidget
Data (State )Management

59. Data (State )Management

60. Data (State )Management

61. Data (State )Management

62. Data (State )Management

63. Data (State )Management

64. Data (State )Management

65. Data (State )Management

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

67. Provider
Data (State )Management

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

69. Data (State )Management
https://www.youtube.com/watch?v=d_m5csmrf7I

70. Streams

77. https://www.youtube.com/watch?v=nQBpOIHE4eE

79. Thanks

80. Ahmed Abu Eldahab
Senior Software Consultant
Google Developer Expert in Flutter
/Dahabdev