1. Flutter
State Management
from Zero to Hero
Ahmed Abu Eldahab
GDE Flutter & Dart
@dahabdev

2. Google Developer Expert in Flutter & Dart
Senior Technical Consultant
Kortobaa LLC CTO
/Dahabdev

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

4. @dahabdev
Level 0
Flutter
State Management

5. Data (State)
User Interface
@dahabdev
Application

6. Declarative UI
@dahabdev

7. Declarative UI
@dahabdev
https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative

8. Declarative UI
@dahabdev
User Interface

9. State Management
@dahabdev
State ?

10. @dahabdev
State = Data
State Management

11. State = Data
int age;
Stateful Widget
final title ;
Your app Data related to Domain like , TODO List,Cart Items , etc..
Stream <String> user; String title ;
var title ;
State Management

12. Declarative UI
@dahabdev
State Management

13. Declarative UI
@dahabdev
State Management
=
Data Management

14. Declarative UI
@dahabdev
How to manage the State/Data ?

15. The Problem?
@dahabdev
- Accessing data easily
- Get notified when the data changed

16. Everything is a Widget

17. Data (State)

18. Data (State)
Flutter Widgets

19. Data (State)
Flutter Widgets

20. Data (State)
Flutter Widgets

21. Data (State)
Dependency
injection
Flutter Widgets

22. Data (State)
Dependency
injection
Flutter Widgets

23. Flutter Widgets
Data

24. Flutter Widgets
Data

25. InheritedWidget
Data (State )Management

26. Inherited Widget
Data (State )Management

27. Data (State )Management
Wrap Materialapp or Home property

28. Data (State )Management

29. Data (State )Management
Button
Scaffold

30. Data (State )Management
Button
Scaffold

31. Data (State )Management

32. Data (State )Management
Inherited
Widget

33. Inherited Widget
Data (State )Management
- Not made to handle data, but to share it.
- To handle data you need to use it with
another widget ( stateful Widget!)
- No dispose method

34. @dahabdev
Story
Facebook Notifications Counter

35. @dahabdev
Story
Bill Fisher

36. @dahabdev
Story

37. Data (State )Management

38. Data (State )Management

39. Data (State )Management

40. @dahabdev
Story
https://facebook.github.io/flux/
Application architecture and Data Management

41. Data (State )Management

42. ?
Data (State )Management
Flux
Fluxxor
Fluxy
Redux
Fluxible
Lux
Reflux
Omniscient JSDelorean

43. Redux
Data (State )Management
Dan Abramov

44. Data (State )Management
-Single source of truth
- State is read-only
- Changes are made
with pure functions

45. @dahabdev
Story

46. @dahabdev
Story
How to Share Code between dart and Angular dart ?

47. @dahabdev
Story
Business Logic Component
UI
Angular
Dart
Backend
Dart

48. @dahabdev
Story
Streams

49. Streams

50. Streams

51. Streams

52. Streams

53. Streams

54. ?
Data (State )Management
Scoped_model
Provider
Bloc
Mobx
Redux
Flux
Inherited Widget
Stateful WidgetFish_Redux

55. Data (State )Management

56. @dahabdev
Level Hero
Flutter
State Management

57. Data (State )Management
- Accessing data easily
- Get notified when the data changed
- I can manage data & Streams throw it
- I can use Proxy

58. Scoped Model
Data (State )Management

59. Scoped Model

60. Scoped Model

61. Scoped Model

62. Scoped Model

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

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

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

66. Provider

67. Provider

68. Provider

69. Provider

70. Provider

71. Bloc
Data (State )Management

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

73. Data (State )Management
https://pub.dev/packages/flutter_bloc

74. Flutter_Bloc

75. Flutter_Bloc

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

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

78. Flutter_Redux

79. Flutter_Redux
States

80. Flutter_Redux
Actions

81. Flutter_Redux
Reducers

82. Flutter_Bloc

83. Flutter_Bloc

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

85. Mobx

86. Mobx

87. Mobx

88. Data (State )Management

89. Data (State )Management
https://pub.dev/packages/flutter_bloc - https://pub.dev/packages/provider

90. https://www.youtube.com/c/DahabIT
New to Flutter ?

91. Thanks

93. /Dahabdev