Flutter

State Management
from Zero to Hero

Ahmed Abu Eldahab

GDE Flutter & Dart
@dahabdev
Google Developer Expert in Flutter & Dart

Senior Technical Consultant

Kortobaa LLC CTO

/Dahabdev
Tell me about you?

Developers ,
Designers , Mac ,
Linux , Windows ,
Web , Mobile ,
Android , ios ?

@dahabdev
 Flutter
State Management
Level 0

@dahabdev
Application

Data (State)

User Interface

@dahabdev
Declarative UI

@dahabdev
Declarative UI

https://flutter.dev/docs/development/data-and-backend/state-mgmt/declarative

@dahabdev
Declarative UI

User Interface

@dahabdev
State Management

State ?
@dahabdev
State Management

State = Data
@dahabdev
State Management
int age; final title ;

Stateful Widget var title ;

State = Data
Stream <String> user; String title ;

Your app Data related to Domain like , TODO List,Cart Items , etc..
Declarative UI

State Management

@dahabdev
Declarative UI

State Management
=
Data Management

@dahabdev
Declarative UI

How to manage the State/Data ?

@dahabdev
The Problem?

- Accessing data easily

- Get notified when the data changed

@dahabdev
Everything is a Widget
Data (State)
Flutter Widgets
Data (State)
Flutter Widgets
Data (State)
Flutter Widgets
Data (State)
Flutter Widgets
Data (State)

Dependency
injection
Flutter Widgets
Data (State)

Dependency
injection
Flutter Widgets

Data
Flutter Widgets

Data
Data (State )Management

InheritedWidget
Data (State )Management

Inherited Widget
Data (State )Management
Wrap Materialapp or Home property
Data (State )Management
Data (State )Management

Scaffold

Button
Data (State )Management

Scaffold

Button
Data (State )Management
Data (State )Management

Inherited
Widget
Data (State )Management

Inherited Widget
- 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
Story

Facebook Notifications Counter

@dahabdev
Story

Bill Fisher
@dahabdev
Story

@dahabdev
Data (State )Management
Data (State )Management
Data (State )Management
Story

Application architecture and Data Management

https://facebook.github.io/flux/

@dahabdev
Data (State )Management
Data (State )Management
Redux Flux

?
Reflux
Fluxxor
Fluxible
Delorean Omniscient JS
Lux Fluxy
Data (State )Management

Redux
Dan Abramov
Data (State )Management

-Single source of truth

- State is read-only
- Changes are made
with pure functions
Story

@dahabdev
Story

How to Share Code between dart and Angular dart ?

@dahabdev
Story

UI
Dart
Backend Angular
Dart

Business Logic Component

@dahabdev
Story

Streams
@dahabdev
Streams
Streams
Streams
Streams
Streams
Data (State )Management
Mobx Scoped_model

?
Inherited Widget
Provider
Redux
Fish_Redux Stateful Widget
Flux Bloc
Data (State )Management
 Flutter
State Management
Level Hero

@dahabdev
Data (State )Management

- Accessing data easily

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

Scoped Model
Scoped Model
Scoped Model
Scoped Model
Scoped Model
Data (State )Management

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

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

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

Bloc
Data (State )Management

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

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

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

https://pub.dev/packages/flutter_redux
Flutter_Redux
Flutter_Redux

States
Flutter_Redux

Actions
Flutter_Redux

Reducers
Flutter_Bloc
Flutter_Bloc
Data (State )Management

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

https://pub.dev/packages/flutter_bloc - https://pub.dev/packages/provider
New to Flutter ?

https://www.youtube.com/c/DahabIT
Thanks
/Dahabdev