This document discusses state management techniques in Flutter, including the use of ChangeNotifierProvider and the BLoC pattern. It explains that the UI is a function of state. It demonstrates how to use ChangeNotifier to track and update a counter value as well as the BLoC pattern to separate business logic from presentation. The BLoC pattern involves defining events and states, using a StreamController to listen to events and update the state stream, and consuming the state stream with a StreamBuilder. It also shows how to implement a basic BLoC counter example using the flutter_bloc library.

1. Moti Bartov - Tikal Mobile Group
Flutter State Management

2. Moti Bartov - Android Developer,
Flutter Developer
Tikal Mobile Group

4. Managing State in Flutter

5. UI = f(State)

6. Scaffold
Home
Page
13
Center Row
textView.text = “${counter}”

7. Scaffold
Home
Page
13
Center Row
State<HomePage>
_counter
setState(() {_counter++});
build()

8. class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
body: Center(
child: Text( '$_counter',
style: Theme.of(context).textTheme.display1,
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
)
} //build
}

9. Widget Tree And The Inherited Widget

10. LandingP
age
MaterialA
pp
Login
Page
Bottom
Nav
Page
Column
Tab
Time
Tab
Reports
Tab
Users
Repo
Repo
Repo Repo Repo
Auth
Auth
Auth Auth Auth

11. LandingP
age
MaterialA
pp
Login
Page
Bottom
Nav
Page
Column
Tab
Time
Tab
Reports
Tab
Users
Repo
Repo Repo Repo
Auth
Auth Auth Auth
Provider
Repo
Auth
BaseAuth auth = Provider.of<BaseAuth>(context);
AppRepo repo = Provider.of<AppRepo>(context);

12. ● ChangeNotifier
● BLoC
○ StreamBuilder
○ BLoC Library

13. Change Notifier

14. class CounterNotifier with ChangeNotifier {
int _counterValue = 0;
int get counter => _counterValue;
void incrementCounter(){
_setCounter(_counterValue + 1);
}
void decrementCounter(){
_setCounter(_counterValue - 1);
}
void _setCounter(int value){
print("_setAndNotify: $value");
_counterValue = value;
notifyListeners();
}
}
Scaffold
Home
Page
13
Center Row
ChangeNotifierProvider<>
CounterChangeNotifier incrementCounter()
decrementCounter()
notifyListeners()

15. ChangeNotifierProvider(
create: (context) => CounterNotifier(),
child: HomePage(title: "ChangeNotifier Demo",)
);
Home
Page
ChangeNotifierProvider<>
CounterChangeNotifier

16. var changeNotifier = Provider.of<CounterNotifier>(context);
Text('${changeNotifier.counter}'
FloatingActionButton(
onPressed: () => changeNotifier.incrementCounter(),
tooltip: 'Increment',
child: Icon(Icons.add),
);

17. The BLoC

18. StreamController
Sink Stream< >

19. BLoC
Event StateSink Stream
Events StreamController
Listen
State StreamController

20. counter_event.dart
abstract class CounterEvent {}
class IncrementCounter extends CounterEvent{}
class DecrementCounter extends CounterEvent{}
counter_bloc.dart
class CounterBloc {
int _counterValue = 0;
//Events sink
final _counterEventController = StreamController<CounterEvent>();
StreamSink<CounterEvent> get eventSink => _counterEventController.sink;
//State Streams and sink
final _counterStateController = StreamController<int>();
StreamSink<int> get stateSink => _counterStateController.sink;
Stream<int> get stateStream => _counterStateController.stream;
CounterBloc(){
_counterEventController.stream.listen((event){
_handleEvent(event);
});
}
BLoC
Event
State
counter_event.dart
abstract class CounterEvent {}
class IncrementCounter extends CounterEvent{}
class DecrementCounter extends CounterEvent{}

21. void _handleEvent(CounterEvent event) {
if(event is IncrementCounter){
_counterStateController.add(++_counterValue);
} else if (event is DecrementCounter){
_counterStateController.add(--_counterValue);
}
}
BLoC
Event
State

22. Sink Stream
Events StreamController
State StreamController
StateStream
Provider/InheritedWidget
HomePage() extends Widget
StreamBuilder(
stream: bloc.stateStream,
builder: (context, snapshot) {
return Scaffold(...)
};
CounterBLoC
BLoC
var bloc = Provider.of<CounterBloc>(context)
BLoC
Event
State

23. BLoC
Event
State

24. BLoC
Event
State
abstract class MainFlutterBlocEvent {}
class IncrementCounter extends MainFlutterBlocEvent{}
class DecrementCounter extends MainFlutterBlocEvent{}
abstract class MainFlutterBlocState {}
class CounterState extends MainFlutterBlocState{
int counterState;
CounterState({this.counterState});
}
class MainFlutterBloc extends Bloc<MainFlutterBlocEvent, MainFlutterBlocState> {
@override
MainFlutterBlocState get initialState => CounterState(counterState: 0);
@override
Stream<MainFlutterBlocState> mapEventToState(
MainFlutterBlocEvent event,
) async* {
print("mapEventState: $event");
if(event is IncrementCounter){
yield CounterState(counterState: (state as CounterState).counterState + 1);
} else if(event is DecrementCounter){
yield CounterState(counterState: (state as CounterState).counterState - 1);
}
}
}

25. State Management - Summary

26. Thank You
Moti Bartov - Tikal Mobile Group