Flutter — MVVM with Provider

Hello Flutter lovers 💜 😄 💜

This tutorial will go over how you can apply MVVM to your Flutter application by using Provider package. I am planing to tell you about Provider and MVVM by creating simple flutter app which I will not worry about UI. First of all, let’s see what is Provider and MVVM shortly.

MVVM

MVVM is short of Model-View-ViewModel. MVVM is a structural design pattern which separates objects into three different groups.

• Models holds application data. They are usually simple class.
• Views handle UI part of the application. It is the connection between user and application.
• ViewModels handles business logics and transform the models information into values to display on screen. Simply, they make connection between models and views.

Model-View-ViewModel

Provider

Provider makes easy to apply MVVM pattern and control the state of our applications. Provider is a Flutter package to handle state management of application. The flutter team recommend to use Provider for state management for beginners.

In order to use Provider in our application, we must add like this line into our pubspec.yaml file.

dependencies:
  provider: ^x.y.z

Or we can run this command on command line.

$ flutter pub add provider

For more information about Provider:

provider | Flutter Package

After understanding MVVM pattern and Provider, let’s begin to apply them in a real application. 😎

I choose to create an application that make service call to get universities information from API then list them on screen and also user can search/filter universities according to their names.

First of all, I want to show the file architecture of the application.

File Architecture of Application

As you can see, I split three main category as base, models and screens. If needed, we can add “utils” category for extensions, mixins … Also I split the screens as viewmodels, widgets, views categories and files for main screen ui and service for associated screen.

In base directory part, I created main service, view and viewmodel files. This base part must be generic. If this base part is generic, you can use this part in your lots of project without making big changes. Let’s see base view and base view model files.

Basically, I created an abstract BaseViewModel class that for other screens view-models can be extended from this class. In this abstract class, I control and initialize main state of view models and handle main state logic.. In BaseView, I used BaseViewModel to control state of the screens that uses this BaseView. By using that base view on our screens, we can control that our screen is busy or not automatically then we can show indicator if state is busy. So we don’t have to write similar code again and again.

In BaseViewModel, I used ChangeNotifier to create our abstract base view model and I used notifyListener method to notify UI. So what are they and why I used them? Let’s explain these questions shortly.

ChangeNotifier

I used this class for sending notification to the UI that is listening the changes from view model. By calling notifyListener() method of ChangeNotifier class, we can send notification that tells the UI something is changed.

As you can se I used ChangeNotifierProvider and Consumer in BaseView.

ChangeNotifierProvider

This is a widget that provides an instance of view model that extends from ChangeNotifier to its descendants. Whenever the notifyListener method is called that provider widget tells ui to change the necessary widget value.

Consumer

The widget actually doesn’t do any fancy work. It just calls Provider.of to get view model that we define like Consumer<BaseViewModel>, in a new widget, and delegates its build implementation to builder method. The builder method must not be null. Whenever the value changed the builder methods called.

If you don’t want to use Consumer widget, you can implement BaseView like this;

If you want your code to be seen clear, I recommend to use Consumer if possible. For more information about ChangeNotifier, ChangeNotifierProvider and Consumer:

Simple app state management

Let’s see how to use BaseViewModel and BaseView for universities_screen.

To briefly describe these lines, I created UniversitiesViewModel by extend from BaseViewModel and make service call and some logic works like filtering universities in this view model. Also I created UniversitiesScreen by using BaseView with type of UniversitiesViewModel class.

Let’s see the application,

That’s all to tell you about Provider and MVVM for now. You can see all code from that repo:

BurakAkten/Universities

Conclusion:

Provider in Flutter is very useful thing for MVVM. If you are not familiar to them, do not be afraid to learn. They will make your coding life interesting and clear. They are not confusing that you think.

Do not hesidate to get in touch with me about any Flutter things☺️

I hope this article useful for you. Thank you for your time. If you liked this article please leave some 👏 and share it with friends. 🤩

Wait for another topic from me Flutter lovers 💜 😄 💜

Happy coding times 🥳🤩

Get in touch on LinkedIn profile.

Burak Akten, Flutter Developer at Profe Information Systems👈