State Management in Flutter using Provider Package

Flutter is a very popular cross-platform technology that is being used for developing applications. Flutter apps are made of widgets which control the state of the app. Now the question is what is a STATE in flutter?

State is basically the current status of the app. It is a combination of all the widgets and the variables in use of the app at that moment. So basically, if some variable is being displayed on screen, and it changes with time, then due to this change in variable, this would be called a different state. So the question is, why do we need to manage the state of the app?
Well, to display the changes caused by variables in your app, we need to rebuild the screen and this is not done automatically. This has to be done with the method called setstate. Well, if we have setstate to manage the state of the app, then why do we need to learn about provider package? Well, I will explain it with an example.

Let’s start with building a simple app. This app will have an appbar with a pre-existing title. The app will also have a textfield in which, if we enter any text, the title on the appbar will change to it.

Now this app works and does exactly what we want it to do. But in bigger and real life applications, your code has to be reformatted so that everything is not inside your scaffold directly. You use different stateless and stateful widgets for this purpose. So for this app, we will build two different stateful widgets: MyAppbar and MyTextField.

But now this doesn’t work anymore. Because the setstate being called inside MyTextfield only rebuilds MyTextField and doesn’t rebuild MyAppbar. Let us understand this by looking at the widget tree of this app.

So basically as both these stateful widgets are not written inside the scaffold of the app and the setstate is being called inside one of these Stateful widgets. It becomes very difficult to maintain the state of the app. Don’t think there is no way to achieve this without using any additional packages, its just that it would be very difficult and unnecessary. To achieve this usability, we will make use of Provider package.

First of all, let’s install the provider package in our project. We will add provider package in our pubspec.yaml file.

Pubspec.yaml

Now to start using provider package, we will first have to create a class called MyAppBarTitle. We will be making this class extend changeNotifier class so that we can use a function called notifylisteners(). The code for this class is:

What this notifyListeners() does is that wherever we are using this class, it will call setstate from there itself. This will enable us to maintain the state of the app from anywhere basically.

Now we will make final changes in our app to implement provider package in to our Scaffold.

Here we have wrapped our Scaffold widget with ChangeNotifierProvider widget. The ChangeNotifierProvider<MyAppBarTitle> basically tells flutter that we will be passing the class MyAppBarTitle through the provider package. Here the create parameter is filled with a function which expects a return value of MyAppBarTitle.
So in a way, you can think of this as creating an Object of Class MyAppBarTitle and making it a global variable accessable everywhere beneath where you made the ChangeNotifierProvider widget. In this case, we have made it above scaffold, so according to our widget tree, any widget that is beneath scaffold or on scaffold can access this object of MyAppBarTitle.

To access this class we just make use of a simple syntax.

 Provider.of<MyAppBarTitle>(context)

This statement returns the object we are providing everywhere beneath the scaffold. So to access the title we defined in MyAppBarTitle, we would type:

Provider.of<MyAppBarTitle>(context).title

So making these changes in our MyAppBar and MyTextField, we get:

Now this app does exactly what we want and the state of the app is maintained from our custom widgets built outside the Scaffold of the app.
The important thing to note in MyTextField is that we are not directly typing:

Provider.of<MyAppBarTitle>(context).title= value;

This would change the value of title in the class but it would not call the function notifyListeners(). Due to this MyAppBar would not be rebuilt again. This is one important thing to keep in mind when using provider package.
The link for the entire project is:

GitHub - Darkknight131714/StateManagementTutorial

What more can we do with Provider?

Consider the app Instagram. We have created a class User. It has various details like name, profile picture, preferences, following, followers, and many more details.
The app Instagram has many pages and to build it we would have to make many stateful and stateless widgets. Consider for each page and inside every page, you have to provide all the details of the user to each and every custom widget. Now this would be very annoying as you would have to pass these values from the very start of the widget tree to the end of widget tree. You will have to keep passing values to all the widgets.

Instead of this, we can just provide the class User to ChangeNotifierProvider in the very start of the widget tree and make it available to every widget we build from that place forward. This will help us reduce our efforts to pass the values as well as maintain the state of the app.

This is basically the cherry on top of the cake. Provider Package gives us both, ease of writing code and also easier state management. So there is no reason to not use this in your app.

References

GitHub - Darkknight131714/StateManagementTutorial

provider | Flutter Package

About Me

I am Gautam Misra, second year student at IIIT, Allahabad, member of AppD wing, GeekHaven. I am a flutter enthusiast and always looking forward to learn new things. You can contact me on LinkedIn. Thank you for reading !!!