Flutter State Management - Moti Bartov, Tikal
1 like136 views
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.
Ad
More Related Content
What's hot (20)
Similar to Flutter State Management - Moti Bartov, Tikal (20)
![[FEConf Korea 2017]Angular 컴포넌트 대화법](https://cdn.slidesharecdn.com/ss_thumbnails/angular-171022050314-thumbnail.jpg?width=560&fit=bounds)
Ad
More from DroidConTLV (20)
Ad
Recently uploaded (20)
Flutter State Management - Moti Bartov, Tikal
- 1. Moti Bartov - Tikal Mobile Group Flutter State Management
- 2. Moti Bartov - Android Developer, Flutter Developer Tikal Mobile Group
- 4. Managing State in Flutter
- 6. Scaffold Home Page 13 Center Row textView.text = “${counter}”
- 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
- 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
- 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