Flutter is witnessing a meteoric rise. With the introduction of Flutter 2.0 along with full web support, it feels like magic that you can generate a web-app and a mobile app from a single code base. Just. Amazing.
But with the rise of Flutter and it's ecosystem, comes the troubles of doing one thing in a myriad of ways. One such trouble is the number of packages available to manage state in your Flutter application.
With more demanding users, even the most simple use-case are becoming complex to implement in a mobile app. Need to update the number of items in the cart globally after adding a product in it? You need a state management solution. Need to maintain the login state of the user throughout the app? You need a state management solution.
The funny part is, previously we tend to ignore global variables, but now, we are embracing them in the form of global states. How times have changed. It's not too long that we'll start using "goto" statements in the code as well. (Just kidding. No one should ever use "goto".)
State management is an important part of a mobile app architecture. Choosing the right technique helps in building an app which is extensible and testable. If you're not using a state management solution in your app, then you should look into it more seriously.
In the context of Flutter, there's a whole ecosystem of state management packages. The developer community is a bit divided at the moment and has not yet decided the best technique because there's no silver bullet.
A good developer is one who can choose her tools based on the problem at hand. As the saying goes, if you've only ever learned to use a hammer, every problem will look like a nail. Hence, one should always understand the pros and cons of multiple tools before making any decision.
Here's a brief introduction of most used state management packages and techniques-
There are more packages like GetIt, GetX etc, you can read more about them here.
There are many advantages of the Provider package specially when combined with ChangeNotifiers-
The MVVM architecture is rather simple to understand and is highly applicable to reactive frameworks like Flutter.
As you can see above, the ViewModel is responsible for holding the business logic and updating the view as the data changes. In a simple app, the model can be used to fetch data from data sources like SQLite Database or a REST API. In larger apps, however, we should use a service layer which will communicate with the data providers, populate the models and then return them to ViewModels. In this way, the ViewModel uses services and updates the views.
The question now is- how can a ViewModel update a View? The answer is simple- ChangeNotifier.
ChangeNotifier is a class which notifies the listeners which are attached to it when notifyListeners() is called. When coupled with Provider, it can injected into any view and hence making the view reactive to changes.
Here are the basic things to keep in mind when working with the MVVM architecture in Flutter using Provider and ChangeNotifier-
This concludes the Part 1 of this series about Flutter and Provider. In the next part, we'll look at the boilerplate code that we use in building Flutter apps.