Simple MVVM in flutter with provider_architecture

SilenceCodder
5 min readMay 27, 2020

--

Hi devs!

In this article, we are going to work on how to build a Simple flutter App with MVVM Architecture. When coding you need to consider a lot of things like code maintenance, easy file navigation, readable code, etc Because you need to separate your business logic, user interface, styles, and data. So that your code will be maintainable and readable. We all know that flutter is tree hierarchy and some developers find it difficult to separate their codes. Fortunately am here to help you start writing clean code from now on.

NOTE

If you use this architecture, You can redesign the whole UI of the App without affecting the Data(business logic and styles).

Have tried this Architecture for more than 5 client Apps and have also taught my student which they all love it and am pretty sure you will also love it.

Youtube video on this article

https://youtu.be/s_4rg6q8FwE

What we will Build

A simple flutter counter App which allow a user to tap on a button to increase a counter and also tap a button to reduce the count number.

The App we are trying to develop will be like this.

Since we are all familiar with flutter default Screen, that’s why I want us to use that screen in order for us to fully understand the MVVM architecture.

We are using this provider_architecture dependency to achieve our goal, This dependency was built by filledstack.

Note: This dependency is updated to stacked but I recommend to firstly use provider_architecture before moving to updated one. So that you have good foundation of the dependency.

if you want to dive directly to the code, you can see it on this GitHub repository below:

We need to keep some terms in mind

Model: This is the data model of how our data will be

View: This is the front-end interface that will be rendering to the user

ViewModel: This is the business logic Or backbone behind View.

I hope we all know how to create a flutter project, if not goto this link to learn how to create a flutter project.

After we are done with creating our flutter project. We need to delete some codes in main.dart file and the code snippet will be like this.

We need to create a style folder where our color, text styles, hardcoded String will be.

Create a folder called style

Let create a dart file called Appcolor.dart

This contains all color we will be using throughout the entire App.

Inside Style folder, Let create AppText.dart, AppTextStyle.dart and AppFontSize.dart

AppText.dart

AppFontSize.dart

AppTextStyle.dart

As you can see they all contain useful data that suppose to be in the UI but we are doing this because we need to separate our code and make it clean.

ViewModel

As I said eairlier, This will be the business logic behind our screens.

Let create a ViewModel folder.

After that, we need to create a baseModel which acts as a state Management for our App(We are using provider). If you don’t know what state Management and provider you can check this out.

BaseModel.dart

Since we are using provider we need to extend the class with ChangeNotifier. So the busy variable is now real-time and ready to listen to any changes.

What’s setBusy function?

SetBusy function is a function that checks if the UI is ready to listen to data or not(it allows our UI/Screen to be reactive).

When the UI is ready to receive or detect any data changes we need to enable it by doing this SetBusy(true).

Whenever we want to close it in order to avoid memory leaks we need to close it by doing this SetBusy(false).

After that let create a file called HomePageViewModel.dart

This will be the business logic behind homepage.dart. If you create any screen like LoginScreen, RegisterScreen etc. They will also have their own ViewModel like LoginViewModel, RegisterViewModel etc

This class will extend our BaseModel in order to listen to data change on UI.

We had to create a function incrementCounter() and decrementCounter()

As you can see, Whenever we tap on the counter we need to notify the listener to listen to data coming from ViewModel to the UI.

Now that we are done with ViewModel. Let go to UI to do some.

VIEW

Let create our VIEW (some developer call it Screen while some call it View) but I prefer to use Screen

After you have create a folder called *Screen* then, create a dart file called homepage.dart

We will now write some code in it. As you observe this is just a normal screen.

We need to add our homePageViewModel.

By doing this.

After that, We need to call our incrementCounter and decrementCounter function from the ViewModel inside the floatingAction button

then display its value.

This is the whole Code of class

Time to run our code.

Hurray! We are done with the App. You may be wondering how you will implement it in a complex App, Don’t worry! I am about to create a Blog App with Firebase and this architecture, So you guys can see how to implement it in complex App.

Don’t forget to subscribe to my channel so that you won’t miss other interest tutorials and articles like this.

My Youtube channel

By the way, Eid Mubarak to all Muslims.

If you have a project and other stuff for me don’t forget to contact me

Email: horlaz229@gmail.com

LinkedIn: https://www.linkedin.com/in/olajire-abdullahi-48007614b/

Whatsapp: +2348185951999

You can join other flutter developers here.

Whatsapp: https://chat.whatsapp.com/L3Q4bMYeRlM5DyvCnljajb

Telegram: https://t.me/joinchat/PSSStxNue_JDD9pijICDJQ

Facebook: https://www.facebook.com/groups/300591190957546/

--

--

SilenceCodder

Mobile Developer(Android/iOS), Android Developer(Java and kotlin) and Digital Marketer. CEO of SkiteTech.