Effective State management using Riverpod

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 covers 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 Mobile Team
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
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.
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 - Change Notifier • Theming(Dark/Light) the Mobile application • Global provider to hold the state • .watch, .read, .listen, .autoDispose
11. Future and Stream Provider • FutureProvider is typically used for – • 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 for – • it allows other providers to listen to the stream using ref.watch. • it removes the need for having to differentiate broadcast streams vs normal streams. 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. ProviderReference
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 • Riverpod helps 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/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