Effective state-management in Flutter using Riverpod - Flutter Fest (Bengaluru)

There are plenty of state management solutions available in Flutter like Bloc Pattern, Rxdart, Redux, MobX, GetIt, Provider, StateNotifier etc. Accordingly , it becomes difficult to chose the optimum one for complex applications.

Riverpod (Reactive State-Management and Dependency Injection) state management library built by Remi Rousseletis , uses different providers to let us access and listen to state changes across the mobile app.

This presentation will cover everything we need to know about Riverpod package and how to start using it in Flutter apps.

Transcript

1. Effective State management using Riverpod Gaurav Bhatnagar Satish Kumar Maersk Mobile Team https://bit.ly/bhat_g https://bit.ly/satish_k @bhatnagar_g
2. Why “State Management” ? • Managing state is something most developers come to deal with when working on flutter applications • When do you know that you need state management? • It is not necessary that every widget needs its own state management some can be just manage with stateful widgets and setState.
4. What is a Provider ?
5. Let’s say for instance we have a Tugboats class that handles numberofTugboats and another class Vessel which dependson the Tugboats class.
6. If we were to have both as providers, then combining them will look like this.
7. Runtime Exception https://bit.ly/3waAXPM
8. It is difficult to have more than one provider of the same type, the one closest to the widget intended will always be accessed and hence causing unintended access. https://bit.ly/3waAXPM
9. Riverpod • Riverpodis dart solution built from scratch to overcome the complexity of Provider • A Provider(Riverpod) is an object that encapsulates a piece of state and allows listening to that state • Wrapping a piece of state in a provider – • Easily accessing that state in multiple locations. • Enables performance optimizations. • Increases the testability of your application. • Allows easy integration with advanced features, such as logging or pull-to- refresh.
10. State management in Action - ChangeNotifier • Theming(Dark/Light) the Mobile application • Global provider to hold the state • .watch, .read, .autoDispose
11. Future and Stream Provider • FutureProvider is typically used – • performing and caching asynchronous operations (such as network requests) • nicely handling error/loading states of asynchronous operations • removes redundancies of FutureBuilder • StreamProvider is like FutureProvider but for Stream instead of Future. • StreamProvider is usually used – • it allows other providers to listen to the stream using ref.watch. • it caches the latest value emitted by the stream, ensuring that if a listener is added after an event is emitted, the listener will still have immediate access to the most up-to-date event. Creating the configuration would be done with your typical async/await syntax, but inside the provider. Using Flutter's asset system, this would be:
12. Combining Providers is simpler
13. Modifier : Family If you want to add external information to construct your provider (that is not necessarily another provider)
14. State management in Action – StateProvider • State provider change the state using StateNotifier • Global provider to have state of list items added to cart • Watch the provider state in the app(wherever it needed) • Call to action to change the state
15. Testability • Since providers are usually declared as global variables, you might worry about that one. After all, global state makes testing very difficult, because it can require lengthy setUp/tearDown. • But the reality is: While providers are declared as global, the state of a provider is not global.
16. Conclusion • RIVERPODhelps manage state of application in a safe way with flexibility of having global scope, similar type of providers and reference-based access. • It is dart-based solution(independent of flutter) where state can be easily autoDisposed when it is no longer used. • Improves Readability, Scalability , Testability and simplifies complex object graphs • If you have an existing app using provider, it is relatively easier to migrate.
17. References : • https://bit.ly/3ycyxmy - Flutter State Management with Riverpod: The Essential Guide • https://bit.ly/riverpod_repo - Repo showcasing different scenarios • https://bit.ly/3waAXPM - Riverpod: A deep dive "on the surface" by Kefeh Collins • https://bit.ly/38WkOW9 - The State of Flutter by tomerpacific • https://bit.ly/3LPxsFj - Fun with Flutter Video Blog Series • https://riverpod.dev/ - Remi Rousselet • https://github.com/rrousselGit/riverpod