All About Flutter Architecture: MVP, MVC, MVVM

Sourav Sarkar Emon
4 min readNov 4, 2022


Whenever we create applications like apps, web, or backend it needs two important factors scalability and maintainability.

And now what are scalability and maintainability? When we add some new features to our projects over a period of time then we can easily add them by scalability. And if we want to change some features in our existing projects we can easily change them by maintainability features. Good architecture helps us to write good code with scalability and maintainability

There are different architecture patterns we could implement in our project — MVC(Model-View-Controller), MVP(Model–view–presenter), and MVVM(Model-View-ViewModel). These architecture patterns mainly focus on two things — 1. Separation of concerns 2. Unit Testing

Separation of concerns: We break our applications into different components like user interface components, business logic components, database components, etc. And if we change one of these components this effect should not affect other components.

MVC Architecture Pattern

The Model-View-Controller (MVC) is an architectural pattern that separates an application into three layers. Model, View, and Controller are the three layers of the application. Each of these components handles specific development parts.

Image Credit: FlutterDevs

Model: Models are the core data flow in this architecture. It can contain business logic also.

View: The job of the view is to take input from the user and show the UI to the user.

Controller: The controller contains business logic with input data handling.

Some free resources to learn the MVC pattern deeply:

  1. MVC Pattern in Flutter By CodeCave(19 minutes Youtube Video)
  2. Design Patterns in Flutter(MVC) by Yashwant Kumar

MVP Architecture Pattern

In Model-View-Presenter (MVP) pattern controller is replaced by the presenter. First The presenter takes user actions from the view and updates the model. Then The presenter retrieves updated data from the model and updates the UI in the view.

Image Credit: FlutterDevs

Some free resources to learn the MVP pattern deeply:

  1. Flutter — MVP Architecture-Codepur(59 minutes detailed video)
  2. The MVP architecture pattern in flutter with a simple demo by Liem Vo

MVVM Architecture Pattern

MVVM stands for Model–View–ViewModel. MVVM is a very famous and established architecture pattern in development. By applying MVVM our code will be reuseable, maintainable, easily testable, and extensible.

Model: The model can contain some business logic, code validation, and database-related queries. The model interacts with ViewModel.

ViewModel: The ViewModel requests data for the model and sends it to the view. ViewModel is the mediator between view and model. First ViewModel deals with user interactions then it requests data from the model and sends it to the view.

View: What we see on the device screen is the View. The View is mainly the user interface of an application where a user interacts with widgets. Users interact with some of the events which all are done by the ViewModel.

Image Credit:

Some free resources to learn the MVP pattern deeply:

  1. MVVM in Flutter using providers — Mobile Programmer(35 minutes video)
  2. An introduction to MVVM in Flutter(With project) by Mohammad Azam
  3. Flutter: MVVM Architecture(Introductory Article) by Jitesh Mohite

Difference between MVC, MVP, and MVVM

MVC: MVC is one of the oldest models. It is used for small-scale projects. Unit testability is the lowest in this architecture. The Model View Controller architecture tightly couples the view and the model components of the architecture.

MVP: MVP is the updated version of the MVC pattern. This software architecture has a dependent user interface as it uses the presenter to act as a link between the view and the model. The components are coupled loosely. Thus we can make changes to it. We can use it for complex projects. It allows appreciable unit testability.

MVVM: MVVM is the established architecture pattern that is highly recommended for industry use. MVVM implements data binding and allows easy separation of the model and the view. We can easily make changes to it. MVVM also allows maximum unity testability.