State Management in Flutter (Flutter Festival Bari)

State Management in Flutter at Flutter Festival 2 (Stateful Things) at Politecnico di Bari.

Transcript

1. Introduction to State Management Paolo Rotolo Nextome
2. Introduction to State Management • Declarative programming (vs imperative); • Single source of truth; • setState; • lifting state up; • provider;
3. UI programming imperative vs declarative
4. imperative vs declarative ViewA a ViewB b ViewC c1 ViewC c2 ViewC c3 ViewB b ViewA a
5. // Imperative style b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) ViewA a ViewB b ViewC c1 ViewC c2 ViewC c3 ViewB b ViewA a
6. // Declarative style return ViewB( color: red, child: ViewC(...), ) ViewA a ViewB b ViewC c1 ViewC c2 ViewC c3 ViewB b ViewA a
7. // Declarative style return ViewB( color: red, child: ViewC(...), )
8. // Declarative style return ViewB( color: red, child: ViewC(...), ) • Widgets are immutable;
9. // Declarative style return ViewB( color: red, child: ViewC(...), ) • Widgets are immutable; • Widgets are easily rebuilt;
10. // Declarative style return ViewB( color: red, child: ViewC(...), ) • Widgets are immutable; • Widgets are easily rebuilt; rebuild UI tree when state changes
11. User interface reflects state of the app Thinking declaratively
12. • Take data as input • Emit UI hierarchy when invoked UI as a Function
13. very quick recap Stateless vs Stateful
14. class HelloView extends StatelessWidget { String name; HelloView({Key? key, required this.name}) : super(key: key); @override Widget build(BuildContext context) { return Text("Hello $name!", style: const TextStyle(fontSize: 42),); } }
15. class HelloView extends StatelessWidget { String name; HelloView({Key? key, required this.name}) : super(key: key); @override Widget build(BuildContext context) { return Text("Hello $name!", style: const TextStyle(fontSize: 42),); } }
16. class HelloView extends StatelessWidget { String name; HelloView({Key? key, required this.name}) : super(key: key); @override Widget build(BuildContext context) { return Text("Hello $name!", style: const TextStyle(fontSize: 42),); } } HelloView(name: 'Flutter')
17. class HelloView extends StatelessWidget { String name; HelloView({Key? key, required this.name}) : super(key: key); @override Widget build(BuildContext context) { return Text("Hello $name!", style: const TextStyle(fontSize: 42),); } } HelloView(name: ‘Paolo')
18. class HelloView extends StatelessWidget { String name; HelloView({Key? key, required this.name}) : super(key: key); @override Widget build(BuildContext context) { return Text("Hello $name!", style: const TextStyle(fontSize: 42),); } } HelloView(name: ‘GDG')
19. state management setState{}
21. class MyHomePage extends StatefulWidget { const MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( int _counter = 0;
22. class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ], ), ), const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: const Icon(Icons.add), int _counter = 0;
23. class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ], ), ), const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: const Icon(Icons.add), int _counter = 0;
24. children: <Widget>[ ], ), ), ); } const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: const Icon(Icons.add), ), void _incrementCounter() { setState(() { _counter + + ; }); }
26. int _counter = 0;
27. const Text( 'You have pushed the button this many times:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), int _counter = 0;
30. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() = > _EventTileState(isFavorite: initialState); } class _EventTileState extends State<EventTile> { _EventTileState({required this.isFavorite}) @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(widget.title), trailing: isFavorite ? Icon(Icons.favorite, color: Colors.redAccent,) : Icon(Icons.favorite_border_outlined, color: Colors.grey,), ), ); } } onTap: () { setState(() {isFavorite = !isFavorite;}); }, bool isFavorite;
31. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() = > _EventTileState(isFavorite: initialState); } class _EventTileState extends State<EventTile> { _EventTileState({required this.isFavorite}) @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(widget.title), trailing: isFavorite ? Icon(Icons.favorite, color: Colors.redAccent,) : Icon(Icons.favorite_border_outlined, color: Colors.grey,), ), ); } } onTap: () { setState(() {isFavorite = !isFavorite;}); setEventAsFavorite(title); }, bool isFavorite;
32. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() >
33. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() >
34. Single source of truth
35. Single source of truth • Every piece of state has one owner;
36. Single source of truth • Every piece of state has one owner; • Only the owner can make changes to state;
37. Single source of truth • Every piece of state has one owner; • Only the owner can make changes to state; • Owner listens to events and makes changes in response;
38. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() >
39. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() >
40. class EventTile extends StatefulWidget { String title; bool initialState; EventTile({Key? key, required this.title, required this.initialState}) : super(key: key); @override State<EventTile> createState() = > _EventTileState(isFavorite: initialState); } class _EventTileState extends State<EventTile> { _EventTileState({required this.isFavorite}) @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(widget.title), trailing: isFavorite ? Icon(Icons.favorite, color: Colors.redAccent,) : Icon(Icons.favorite_border_outlined, color: Colors.grey,), ), ); } } onTap: () { model.setEventAsFavorite(title); }, bool isFavorite; Lift state up
41. class EventTile extends StatelessWidget { String title; bool favourite; EventTile({Key? key, required this.title, required this.favourite,}) : super(key: key); @override Widget build(BuildContext context) { return Card( child: ListTile( title: Text(title), trailing: favourite ? Icon(Icons.favorite, color: Colors.redAccent,) : Icon(Icons.favorite_border_outlined, color: Colors.grey,), onTap: () { model.setEventAsFavourite(title); }, ), ); } }
42. Stateful things
43. class ImageWidget extends StatelessWidget { const ImageWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: 0.0, ); } } class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Slider(value: 0.5, onChanged: (double value) { }); }
44. ImageWidget SliderView HomeView
45. class SliderWidget extends StatefulWidget { const SliderWidget({Key? key}) : super(key: key); @override State<SliderWidget> createState() => _SliderWidgetState(); } class _SliderWidgetState extends State<SliderWidget> { @override Widget build(BuildContext context) { return Slider(value: 0.5, onChanged: (double value) { }); } }
46. class SliderWidget extends StatefulWidget { const SliderWidget({Key? key}) : super(key: key); @override State<SliderWidget> createState() => _SliderWidgetState(); } class _SliderWidgetState extends State<SliderWidget> { double rotation = 0.0; @override Widget build(BuildContext context) { return Slider(value: rotation, onChanged: (double value) { setState(() { rotation = value; }); }); } }
47. class ImageWidget extends StatelessWidget { const ImageWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: 0.0, ); } }
48. class ImageWidget extends StatefulWidget { const ImageWidget({Key? key}) : super(key: key); @override State<ImageWidget> createState() => ImageWidgetState(); } class ImageWidgetState extends State<ImageWidget> { @override Widget build(BuildContext context) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: 0.0, ); } }
49. class ImageWidget extends StatefulWidget { const ImageWidget({Key? key}) : super(key: key); @override State<ImageWidget> createState() => ImageWidgetState(); } class _ImageWidgetState extends State<ImageWidget> { double imageRotation = 0; @override Widget build(BuildContext context) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: imageRotation, ); } }
50. _ImageWidgetState? imageState; class ImageWidget extends StatefulWidget { const ImageWidget({Key? key}) : super(key: key); @override State<ImageWidget> createState() { imageState = _ImageWidgetState(); return imageState!; } } class _ImageWidgetState extends State<ImageWidget> { double imageRotation = 0; @override Widget build(BuildContext context) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: imageRotation, ); } }
51. class SliderWidget extends StatefulWidget { const SliderWidget({Key? key}) : super(key: key); @override State<SliderWidget> createState() => _SliderWidgetState(); } class _SliderWidgetState extends State<SliderWidget> { double rotation = 0.0; @override Widget build(BuildContext context) { return Slider(value: rotation, onChanged: (double value) { setState(() { rotation = value; }); }); } }
52. class SliderWidget extends StatefulWidget { const SliderWidget({Key? key}) : super(key: key); @override State<SliderWidget> createState() => _SliderWidgetState(); } class _SliderWidgetState extends State<SliderWidget> { double rotation = 0.0; @override Widget build(BuildContext context) { return Slider(value: rotation, onChanged: (double value) { setState(() { rotation = value; }); }); } }
53. class SliderWidget extends StatefulWidget { const SliderWidget({Key? key}) : super(key: key); @override State<SliderWidget> createState() => _SliderWidgetState(); } class _SliderWidgetState extends State<SliderWidget> { double rotation = 0.0; @override Widget build(BuildContext context) { return Slider(value: rotation, onChanged: (double value) { setState(() { rotation = value; imageState ?. setState(() { imageState ?. imageRotation = value; }); }); }); }
54. class SliderWidget extends StatefulWidget { const SliderWidget({Key? key}) : super(key: key); @override State<SliderWidget> createState() => _SliderWidgetState(); } class _SliderWidgetState extends State<SliderWidget> { double rotation = 0.0; @override Widget build(BuildContext context) { return Slider(value: rotation, onChanged: (double value) { setState(() { rotation = value; imageState ?. setState(() { imageState ?. imageRotation = value; }); }); }); }
55. // Imperative style b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3) ViewA a ViewB b ViewC c1 ViewC c2 ViewC c3 ViewB b ViewA a // Declarative style return ViewB( color: red, child: ViewC(...), )
56. ImageWidget SliderWidget HomeView
57. • Strongly coupling widgets; • Globally tracking state; • UI updating other UI; Bad things ImageWidget SliderWidget HomeView
59. ImageWidget SliderWidget HomeView
60. ImageWidget SliderWidget HomeView ImageState SliderState
61. ImageWidget SliderWidget HomeView ImageState SliderState
62. ImageWidget SliderWidget HomeView HomeModel Lifting state up
63. ImageWidget SliderWidget HomeView HomeModel
64. ImageWidget SliderWidget HomeView HomeModel
65. ImageWidget SliderWidget HomeView HomeModel Stateless! Stateless!
66. provider
67. name: stateful_things # ... dependencies: flutter: sdk: flutter provider: ^6.0.0 dev_dependencies: # ...
68. Provider • ChangeNotifier • ChangeNotifierProvider • Consumer
69. ImageWidget SliderWidget HomeView HomeModel Stateless! Stateless!
70. class HomeModel extends ChangeNotifier { double _rotation = 0; void setRotation(double newRotation) { _rotation = newRotation; // This call tells the widgets that // are listening to this model to rebuild. notifyListeners(); } double getRotation() => _rotation; }
71. class HomeModel extends ChangeNotifier { double _rotation = 0; void setRotation(double newRotation) { _rotation = newRotation; // This call tells the widgets that // are listening to this model to rebuild. notifyListeners(); } double getRotation() => _rotation; }
72. ChangeNotifierProvider • provides instance of ChangeNotifier to its descendant • above widget that access state
73. ImageWidget SliderWidget HomeView HomeModel ChangeNotifierProvider
74. @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateful Things', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Padding( padding: const EdgeInsets.all(32.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Divider(height: 128), ImageWidget(), Divider(height: 128), SliderWidget(), ], ),
75. @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateful Things', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Padding( padding: const EdgeInsets.all(32.0), child: ChangeNotifierProvider( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Divider(height: 128), ImageWidget(), Divider(height: 128), SliderWidget(), ], ),
76. @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateful Things', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Padding( padding: const EdgeInsets.all(32.0), child: ChangeNotifierProvider( create: (context) = > HomeModel(), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Divider(height: 128), ImageWidget(), Divider(height: 128), SliderWidget(), ], ),
77. @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateful Things', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Padding( padding: const EdgeInsets.all(32.0), child: MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => HomeModel)), ], create: (context) = > HomeModel(), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Divider(height: 128), ImageWidget(), Divider(height: 128), SliderWidget(), ], ),
78. @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateful Things', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Padding( padding: const EdgeInsets.all(32.0), child: MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => HomeModel)), ChangeNotifierProvider(create: (context) … ChangeNotifierProvider(create: (context) … ], create: (context) = > HomeModel(), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Divider(height: 128), ImageWidget(), Divider(height: 128), SliderWidget(),
79. class ImageWidget extends StatelessWidget { const ImageWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: 0.0, ); } }
80. class ImageWidget extends StatelessWidget { const ImageWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Consumer( builder: (context, model, _) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: model.getRotation(), ); }, ); } }
81. class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Slider(value: 0.0, onChanged: (double value) { }); } }
82. class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { var model = Provider.of<HomeModel>(context, listen: true); return Slider(value: 0.0, onChanged: (double value) { }); } }
83. class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { var model = Provider.of<HomeModel>(context, listen: true); return Slider(value: model.getRotation(), onChanged: (double value) { }); } }
84. class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { var model = Provider.of<HomeModel>(context, listen: true); return Slider(value: model.getRotation(), onChanged: (double value) { model.setRotation(value); }); } }
85. class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { var model = Provider.of<HomeModel>(context, listen: true); return Slider(value: model.getRotation(), onChanged: (double value) { model.setRotation(value); }); } }
86. Recap • ChangeNotifier • ChangeNotifierProvider • Consumer
87. class HomeModel extends ChangeNotifier { double _rotation = 0; void setRotation(double newRotation) { _rotation = newRotation; // This call tells the widgets that // are listening to this model to rebuild. notifyListeners(); } double getRotation() => _rotation; }
88. @override Widget build(BuildContext context) { return MaterialApp( title: 'Stateful Things', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: Padding( padding: const EdgeInsets.all(32.0), child: ChangeNotifierProvider( create: (context) = > HomeModel(), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Divider(height: 128), ImageWidget(), Divider(height: 128), SliderWidget(), ], ),
89. class ImageWidget extends StatelessWidget { const ImageWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Consumer( builder: (context, model, _) { return Transform.rotate( child: Image.asset("assets/image.png"), angle: model.getRotation(), ); }, ); } }
90. class SliderWidget extends StatelessWidget { const SliderWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { var model = Provider.of<HomeModel>(context, listen: true); return Slider(value: model.getRotation(), onChanged: (double value) { model.setRotation(value); }); } }
91. Thanks! rotolo.dev paolo@rotolo.dev