Provider State Management in Flutter
By: Maaz Aftab
Tags: Flutter, State, State Management, Flutter Widget, Provider

For the implementation, Let’s consider a scenario. Say a person wants to apply for driving license, and there is a very simple form that he has to fill using our Flutter mobile application in order to know if he is eligible for applying or not. The Criteria for eligibility is pretty simple, one must be at least 18 years old in order to be eligible.

So our Flutter application would be a single screen application, on which there would be a simple Form contains TextField. There are two extra widgets on screen as well, one is Circle, which is orange by default, but after submitting form, if the user is eligible, then the circle would turn green, however if not, then red. Secondly, there is a Text widget at the bottom that will show the message that would change based on user input, however, by default it will show “You have not give any input”.

Application UI design

Eligibility Screen Code with out Provider

Above is the Code for Eligibility Screen without Provider (Not Final). So, we have done with the UI part, and now we can make ChangeNotifer against above screen.

ChangeNotifier

Now let’s make ChangeNotifier against above screen that would contain all the state data related to that screen.

Eligibility Screen Change Notifier Code

Now in the above ChangeNotifier that we have made against Eligibility Screen has just two state data in it first String _eligibilityMessage, which is showing message, after processing the user age, and, bool _isEligible flag, which is to change the color of the circle status indicator.

In ChangeNotifier, we made a method checkEligibility() which takes age as a parameter and after performing the logic it changes the state, i.e., if user is eligible then it will call eligibleForLicense() else it will call notEligibleForLicense().

The Most Important thing is calling notifyListeners(), whenever you change the state data in ChangeNotifier. If you will not call this method, the state change would not reflect in the UI. The method notifyListeners() tells flutter to rebuild the screen which is using that ChangeNotifier.

ChangeNotifierProvider

As we have made EligibilityScreenProvider ChangeNotifer against the EligibilityScreen, now we have to connect this provider with the screen, or we have to use this provider in EligibilityScreen. For this, we use ChangeNotifierProvider, a widget, that provides the instance of ChangeNotifer to the screen, and thus we can access state data of the ChangeNotifier in the screen. We just need to wrap the EligibilityScreen inside ChangeNotifierProvider for this, code is given below.

Consumer

It is not necessary that all the part of the UI in EligibilityScreen will be using the state data from EligibilityScreenProvider, and thus needs to be rebuit. It may be possible that 50% of the UI of any screen, not in our case, not needs to be rebuilt. So, Consumer, which is a widget, allows to observe the state changes from ChangeNotifier in a particular part of UI, and thus only observing part of the UI will get re-rendered.

Eligibility Screen Code

At line 10, We have used ChangeNotifierProvider widget, so that we can access what’s inside the ChangeNotifier. We need to give the type of your provider in type parameter of ChangeNotifierProvider ChangeNotifierProvider<EligibilityScreenProvider>.

At line 19, We have used Consumer widget, so that whatever inside it gets rebuilt whenever notifyListener() is called from EligibilityScreenProvider ChangeNotifier. At Line 20, we have 3 thing in the builder method, the first one is BuildContext context, which we have in every builder, second the instance of EligibilityScreenProvider provider, which you can use to access the properties of EligibilityScreenProvider, and last one is just for the optimization, which you can skip for now.