Get started with Provider state management in Flutter
Why do you need state management in your Flutter apps?
In Flutter, there are three major types of widgets, which are listed below.
- StatefulWidget and State: These are widgets that can be built differently several times over their lifetime. They have mutable states and can change their appearance based on user interactions or other events. E.g. User Login screen with actionable button, animations, texts, etc.
- InheritedWidget: These are widgets that introduce ambient state that can be read by descendant widgets. It provides a way to share data across the widget tree. E.g. Theme and MediaQuery that can be accessed anywhere in your app.
- StatelessWidget: Are widgets that always build the same way given a particular configuration and ambient state E.g. Privacy Policy screen with texts and images.
State management is essential in managing and updating the states of mutable widgets in a Flutter app while ensuring smooth user interactions on the app. Furthermore, some of the various types of state management implement in your Flutter app are;
- Bloc
- Riverpod
- Getx
- Provider
- Redux, etc.
In this tutorial, we will focus on the provider state management. You can learn more about the other state management approaches here.
The Provider State management
Provider state management is a wrapper around InheritedWidget to make them easier to use and more reusable. By using Provider, instead of manually writing InheritedWidget, you get:
- simplified allocation/disposal of resources
- lazy-loading
- a vastly reduced boilerplate over making a new class every time
- Devtool friendly — using Provider, the state of your application will be visible in the Flutter devtool.
- a common way to consume InheritedWidgets
- increased scalability for classes with a listening mechanism that grows exponentially in complexity.
Also with Provider, you don’t need to worry about callbacks or Inherited Widget but you do need to understand 3 concepts:
- ChangeNotifier: a simple class in the Flutter SDK that provides change notifications to its listeners. You can subscribe to its changes, it notifies your app UI of the changes whenever you call the notifyListeners() class. The notifyListeners() is a class that tells the widget listening to this model to rebuild after each change.
- ChangeNotifierProvider: It is a widget from the Flutter package that provides an instance of ChangeNotifier to its descendants. It is placed above the widget that needs to be accessed.
For apps with multiple providers, it is declared this way
- Consumer: It is used for obtaining a value with optimized performance when it is Buildcontext can’t be obtained. It gets Provider<T> from its ancestors and passes its value to the builder.
Alternatively, we can use read values using the extension on Buildcontext;
- context.watch<T>(), which makes the widget listen to changes on T. This is also similar to the Provider.of<T>(context, listen: true).
- context.read<T>(), which returns T without listening to it. This is also similar to the Provider.of<T>(context, listen: false). It doesn’t rebuild when the value is changed and it cannot be inside the stateless widget build but can be called outside it.
Here is the link to the github repository for the sample flutter project built using provider.
Lastly, check this link to learn more about the provider package and set it up in your project.
I hope this helps you get started with building amazing flutter apps using the provider package. Watch out for the second part of the article on advanced features of provider such as dependency injection, provider objects, etc.
Till next time✌️
