Flutter MVVM + Providers
Flutter MVVM + Provider Architecture
MVVM stands for Model View ViewModel
It is the most common app Architecture used in the production code for scalable apps.
Provider is a reactive State Management architecture for flutter.
Below is a diagrams which I created that uses both MVVM and Provider.
Its consists of :
1. Model class
2. Notifier class
3. ViewModel class
4. View class
5. Service/Api class
Let’s discuss them one by one with example :
So let us take an example of fetching posts from data base and rendering them on screen.
1. Model Class (Post class)
It consists of the data fields required for the post and some functions for operations on it.
2. Notifier class
This consists of the list of all the posts fetched from the database.
So when the setPostList() is called the instance of PostNotifier get updated automatically by the notifyListeners() call.
3. ViewModel class
This consists of simple post object of a particular post to perform read and write on that post such as likes,comments etc.
4. View class
This consists of provider listener for posts.
PostsNotifier postNotifier = Provider.of<PostsNotifier>(context) ;
and the logic to display all the posts.
Note : the PostViewModel will get initialzed in the PostView class in the constructor using the post object. And The PostView will render the actual post on the screen.
5. Service/Api class
This consists of logic to fetch the data from database and set the data to the notifier.
Github Repo
here is the sample flutter app that uses this (MVVM + provider) approch .
You can use it as a starter code for your flutter app.
https://github.com/shubham-chhimpa/flutter-mvvm-provider-demo
Feel Free to contact me :
LinkedIn : https://www.linkedin.com/in/shubhamchhimpa/
Github : https://github.com/shubham-chhimpa
Portfolio : https://shubham-chhimpa.github.io/
