Simple MVVM in flutter with provider_architecture
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
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
