MVVM architecture in Flutter

An architectural pattern is a solution to a common design problem in software development. It provides a predefined structure and guidelines for organizing and designing software systems, allowing developers to build reliable, scalable, and maintainable applications more efficiently.

MVVM architecture pattern

Architecture helps in achieving key software qualities such as modularity, reusability, flexibility, and extensibility, leading to improved code quality, reduced complexity, and enhanced performance.

There are different type of architecture pattern that we could use to develop software. Some of the common architecture are

• MVC
• MVVM
• MVP
• MVVP and more..

Hello guys, This is CodingWithTashi and in this shitty post, we will deep dive into implementing MVVM architecture pattern .

Before we continue, I just wanted to let you know that This post was inspired from android MVVM architecture and I have shared all the link and resource that I have taken help at the end of the post.

Content:

1. What is MVVM?
2. Why and when should we use it?
3. How to use MVVM in flutter?
4. Building MVVM flutter application with Riverpod.

What is MVVM?

MVVM is an architectural pattern that enhances separation of concerns and promotes a clear separation between the user interface and the business logic.

M — Model

• The model represents the data and business logic,
• This is where data model class, repository and service will sit

V — View

• The view represents the user interface.
• View can be any widget that we see in the UI, It can be button, container etc

VM — View Model

• The view model acts as an intermediary between the view and the model. The view model exposes data and commands to the view and handles the logic related to user interactions.

Key: View should not contain any business logic at all. This way we can change UI at any given point of time since business logic is not present here. [Saperation on concern]

I hop you got brief idea, Below diagram represent the same MVVM architecture as we discussed above.

Alright now that we know what is MVVM, let’s discuss on why and when should you use it

Why and when should we use it?

When we talk about why we should use it, It all come down to what problem does it solve and how does it benefits us.

Well, there are several advantages of using MVVM in your projects, such as:

• Collaboration among development teams, ensures consistency in design and implementation
• Enables easier to troubleshoot, debug and test.
• Robust, reliable, and scalable software application.
• It makes your project loosely coupled.
• Your project will be easier to maintain.
• It gives great structure to your project and makes it easier to navigate and understand our code.

Tips: Since it adds a lot of extra files and classes, having architecture is not ideal for low-complexity projects

You can use MVVM project for mid - large scale application.

Alright now that we know what is MVVM and when to use it. Let’s see how we can implement same in flutter application by building simple application.

How to use MVVM in flutter?

• We will try to fetch list of users and display in flutter using MVVM with riverpod as state management.
• You can use jsonplaceholder to mock the data. I will be using https://jsonplaceholder.typicode.com/users to fetch user.
• For the model class, I am not going to use ay package. Instead I will be using json to dart service to create dart model class for user.

Package used

• flutter_riverpod
• http
• We don’t need to use getIt since we riverpod can act as service locator as well.

Project structure

MVVM

• Our project structure should look something like this. There are different way to structure the folder. You can also keep all the model class in one folder, view_model class in another as well. But in my case I have kept screen wise.

Code

Alright, once package are added, make sure to update main.dart as below

main.dart

Notice: We have wrapped MaterialApp in ProviderScope . This is required in order to use flutter_riverpod

• Now in user.dart add your user model class code. Since code is long, I am not adding it here. You can get the source code from here.

Now coming to home_repository.dart

As you can see we are just fetching the data from url and return back to the whoever fetchUser method calling.

Now in homeview_model.dart

Notice: We are just calling the repository fetchUserand store the data in userList . That means UI is independent of ViewModel here

In view home.dart

Notice: Here we are asking viewmodel to fetch data and then listening to the event in Consumer widget.

Notice: We have no business logic added in the view.

That it, You can run the app now and you show get the below output.

MVVM flutter

If you have notice, our application workflow is as below

UI → ViewModel → Repository

Obviously This is just a simple application. There are more to it. Things like error handling, multiple state, remote and local database etc which we can cover in some other post.

I hope you got little idea about MVVM architecture and it’s implmentation in flutter with riverpod.

You can get the complete source code from here.

If any of my shitty posts help you in any way, you can connect me on Twitter or Linkedin. Check out similar posts from CodingWithTashi.

buymeacoffee.com/codingwithtashi

Link and resources:

Guide to app architecture | Android Developers

Introduction | Riverpod

Understanding MVVM Architecture in Android