Deep Dive into Flutter State

Introduction to State and State Management in Flutter

Transcript

1. Deep Dive into Flutter State Adi Nugroho
2. Adi Nugroho - Mobile Developer @ Upwork - Clients : - Indonesia Stock Exchange - Edgeworks Solutions Pte. Ltd. (Singapore) - TestFairy (USA) - Synapsyte Pty. Ltd. (Australia) - Plantas Técnicas Plantec Cía. Ltda. (Ecuador)
3. Agenda - Brief Introduction to Flutter - State in Flutter - State Management
4. What’s Flutter Cross platform framework developed by Google. Its main programming language is Dart. It can be used to develop app on: - Android - iOS - Web - Desktop - Fuchsia (soon)
5. What’s Flutter Everything related to view in Flutter is called Widget. - Button - Text - Padding - Container
6. Flutter Uses Reactive Programming - In imperative programming, we use statement to change program’s state. btnConfirm.setOnClickListener { txtGreeting.text = txtInput.text } // What happen if txtGreeting or txtInput is not exist
7. Flutter Uses Reactive Programming - In reactive programming, we change the data flow / state and the changes will propagate to the widget. But it also incorporate many paradigms : https://flutter.dev/docs/resources/faq#what-programming-paradigm-does-flutters-framework-use
8. class MyHomePage extends StatefulWidget { ... } class _MyHomePageState extends State<MyHomePage> { var judul = "Hit You With"; void _onButtonPressed() { setState(() { judul = "Ddu Ddu Ddu"; }); } @override Widget build(BuildContext context) { return Column( children: <Widget>[ Text(judul,), MaterialButton( onPressed: () => _onButtonPressed(), ), ], ); } }
9. How Flutter build() works - UI refreshes at 60fps. - When a state change happens, Flutter engine compares between new and old. - Only update widgets that have state changes. - Old widget then get garbage collected.
10. Widget and State Flutter has 2 type of widget - Stateless Widget - Stateful Widget What is state? In Flutter, this is just a variable.
11. Stateless Widget - Widget without state. - When it is displayed, it execute the build method and DONE. - That’s it. - Best for static content and container.
12. class StateDemo3 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Demo Stateless"), ), body: Center( child: Text( "Aplikasi Versi 1.0", ), ), ); } }
13. Stateful Widget - Widget with state. - Best for widget with dynamic content. - Has setState function to change state. - Has initState method that’s called when the widget is displayed.
14. class StateDemo3 extends StatefulWidget { @override _StateDemo3State createState() => _StateDemo3State(); } class _StateDemo3State extends State<StateDemo3> { var versi = "0.0"; Future<void> _loadVersi() async { var loaded = await API.loadAppVersion(); setState(() { versi = loaded }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Demo Stateless"), ), body: Center( child: Text( "Aplikasi Versi $versi", ), ), ); }
15. Stateless Widget as Container
16. Stateless Widget as Container Stateless Widget Stateful Widget Stateful Widget Stateful Widget Stateless Widget
17. Stateful Widget as Container? - Only when there’s a need to communicate between children. - But there’s a better way to do this : State Management
18. State Management - Almost every Flutter app consists of reusable widgets. - These widgets need to communicate with each other, whether in one Container or when they’re being navigated. - Famous state management in Flutter: - BLoC - ScopedModel - Flutter Redux - Provider
19. Provider - Built by Flutter team. Provider was created after they need to combine the strength between ScopedModel and BLoC (Stream). - https://www.youtube.com/watch?v=d_m5csmrf7I&t=35s
20. Provider - https://flutter.dev/docs/development/data-and-backend/state-mgmt/s imple - Demo
21. Thank you - @adinugroho - https://t.me/KelasMobileMalang