Design Pattern is something which has been always a very Mysterious term for developers and we are very much confused between the term Software Architecture and Design patterns, So before starting anything about design patterns we need to clear this doubt regarding the Design Pattern and Software Architecture.

Software Architecture

Software Architecture is how the whole components of system software are organized and assembled. How they communicate with each other. And the Constraint the whole UI is ruled by.

So If we go through this definition we come across three important aspects and those are

• How the whole components of system software are organized and assembled:- Architectural Pattern
• How they communicate with each other:- Messaging & APIs
• The constraints the whole UI is ruled by:- Quality Attributes

Design Pattern

Design Pattern could be defined as a common repeatable solution to recurring problems in software design. Design patterns can not be related to a finished design which will be directly used in code but it could be understood as a description or template for how to solve any common problem that may occur in many situations.

So If we go through this Definition we will find that

• It is a solution to recurring problems of software development.
• It is not a sample code which will be directly used in the project.
• It is just a template that helps to solve any problem that occurs in software development.

Difference between Software Architecture and Design Pattern

So after going through both the definition we came to know that both of it could be differentiated on the basis

Scope:- Software Architecture has a universal scope, it has to managed at a Higher level like Server Configuration, etc.Whereas Design pattern has a Lowe level scope that comes to the project internal code pattern.

Working:- Software Architecture is all about organizing and assembling the components in such a way that their communication is very much convenient and secure. Whereas a Design pattern is about how the components are built.

So I hope this comparison clears the doubt between Software Architecture and Design Pattern. So after having a piece of knowledge that what design pattern actually we will start a few famous design patterns which are mainly used in flutter development. So, First of all, we will start with the very Basic MVC Pattern and we will see how MVC is used in Flutter.

MVC In Flutter

MVC stands for the model view controller and its main work is to have a segregated code base, it aims to separate the code and area of responsibility while software development. The main focus of MVC is to separate the interface of the project from the functionality and the data that is used in the application. As we all know that neat and arranged things are always easy to use and maintain, the same is with MVC it makes the codebase neat and arranged and it achieves these with three of its components.

• Model:- Model compromises of the data source it may be from anywhere DB, API, JSON, etc. In some cases, it may consist of some business logic.
• View:- View is all about the user interface, I.e displaying data and taking inputs from the user.
• Controller:- It contains the business logic, I.e Controlling what data will be shown to the user, user input handling, etc.

Communication Flow

Differentiating the three of these basic components of projects helps the developer to write a neat and modular code which makes the code Reusable and also helps in parallel development. It becomes very easy to work on the project as it does not affect other parts of the project if something is changed in one part. So keeping them separated needs a communication flow in which they will interact with each other and achieve the functioning of the project.

So as we could see from the following flow diagram the User interacts with the View part of the project which helps the user to see the Data and provide the input to the controller through the view. Controller Active as the brain of the project does the calculation or manipulation of data from the user or takes the data from the model to work on it and provides it to the View which shows the desired data to the user. Here we find that the View shows and receives the data but it directly not interact with the Model, it is the controller that plays a role between view and model in data manipulation and data representation. The View and the Model are tightly coupled to the Controller i.e View Knows how to communicate to Controller, Controller knows how to communicate to Model and Model and View works collectively without knowing each other existence.

Code Understanding:

If you have not installed the flutter SDK or you are still getting familiar with it :

/media/eaefff34fddcc032a2b4fe36aa69b8a9

Let’s dive into the code part for an In-depth understanding of the process:-

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

• Add the current latest version of MVC pattern package under the dependencies in pubspec.yaml file.

dependencies:   
 mvc_pattern: ^latest version

Create a Model Class:

As Explained above a model class is created for both counter:-

Create the Main Controller :

The Controller is Created as this Basically Ensures the interaction with the model :

Adapting it Into The View :

The controller is then bound to the view.dart file so that the increment and decrement functionality may work as depicted.

Find the Code Version on Github at:

flutter-devs/Flutter_MVC
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Closing Thoughts

Design Pattern is a Quintessential tool in large scale apps in native applications which you can also practice in flutter also. In this Blog, only MVC has been explained but this will a series of blogs and in the next blogs, we will be sharing about MVP, MVVM, CLEAN, etc.

If you have not used Design Patterns in Flutter, I hope this article has provided you with valuable information about what is all about it, and that you will give it Design Patterns — a Try. Begin using them for your Flutter Apps !!

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:

And read more articles from FlutterDevs.com

FlutterDevs has been working on Flutter for quite some time now. You can connect with us on Facebook and Twitter for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸

Related: Explore SOLID Principles In Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.

In the previous blog of this series, we saw what actually design pattern is and how it is different from Software Architecture. for more explanation, I would suggest you guys go through my previous blog for clearing basic concepts of design patterns.

So wrapping Design Patterns in simple lines

Design patterns are used for separating the Main code (Business Logic) from the UI part which will make your code more readable and very easy in testing.

What is the MVP?

MVP stands for Model View Presenter, As we could see that it consists of three words so talking about them a little bit.

• Model: It is an interface defining the data to be displayed or otherwise acted upon in the user interface.
• View: It is a passive interface that displays data (the model) and routes user commands (events) to the presenter to act upon that data.
• Presenter: It acts upon the model and the view. It retrieves data from repositories (the model) and formats it for display in the view.

So We would be knowing more about these terms from our Demo App which shows a basic increment and decrement counters.

Communication Flow

We will see from this Flow Diagram that how model view and presenter are connected to make our code more readable and easier in testing.

MVP consists of model view and presenter and they are bonded in such a way that View in the topmost layer which is responsible for showing the data to the user and taking data from the user, Presenter being in the middle of View and Model takes the input from View and taking the data from Model. the Presenter contains the UI business logic for the View. All invocations from the View delegate directly to the Presenter. The Presenter is also decoupled directly from the View and talks to it through an interface. This is to allow mocking of the View in a unit test. The View and Model are entirely shielded from one another. The Model may raise events, but the Presenter subscribes to them for updating the View. The Model is the layer providing the data source to the user in any format.

How MVP is different from MVC?

MVP is the derivative of MVC, The key difference between MVC and its derivatives is the dependency each layer has on other layers, as well as how tightly bound they are to each other. For establishing the difference between these two design patterns, we will take the help of the flow diagram of both the design patterns to find out the difference in the way to find out how they are helpful in their own way.

As we could see from the flow diagram of MVC that the View is the one that interacts with the user, and it notifies the controller. The controller modifies some of the model based on user interaction. The Controller gets updated data on which models perform some business logic. The view gets updated once the controller passes the new data which has been received from the model. According to this, we could say about MVC that

• Controllers are based on behaviors and can be shared across views
• Can be responsible for determining which view to display

Now Coming to MVP, This Flow diagram shows that the flow chart is almost the same as it is in the case of MVC, but here the Controller is being replaced by Presenter. The view is the topmost layer of the architecture, interacts with the user and takes the input which is being passed to the presenter, and taking the data from the model it sends the data back to the View to present it to the user. So According to this, we could say about MVP that

• The view is more loosely coupled to the model. The presenter is responsible for binding the model to the view.
• Easier to unit test because interaction with the view is through an interface.
• Usually view to presenter map one to one. Complex views may have multi presenters.

Code Understanding:

If you have not installed the flutter SDK or you are still getting familiar with it :

Let’s dive into the code part for an In-depth understanding of the process:-

1. Firstly, Create a new project and then clear all the code in the main.dart file. Type below command in your terminal:-

flutter create yourProjectName

• Add the current latest version of MVP pattern package under the dependencies in pubspec.yaml file.

dependencies:   
mvp: ^1.0.0

Create a Model Class:

As Explained above a model class is created for both counter:-

class CounterModel {
  int counter = 0;

  CounterModel(this.counter);
}

Create the Presenter Class:

The Presenter is Created as this Basically Ensures the interaction with the model :

import 'package:fluttermvpdemo/model/CounterModel.dart';
import 'package:fluttermvpdemo/view/Counter.dart';

class Presenter {
  void incrementCounter() {}
  void decrementCounter() {}
  set counterView(Counter value) {}
}

class BasicCounterPresenter implements Presenter {

  CounterModel _counterViewModel;
  Counter _counterView;

  BasicCounterPresenter() {
    this._counterViewModel = new CounterModel(0);
  }

  @override
  void incrementCounter() {
    this._counterViewModel.counter++;
    this._counterView.refreshCounter(this._counterViewModel);
  }

  @override
  void decrementCounter() {
    this._counterViewModel.counter--;
    this._counterView.refreshCounter(this._counterViewModel);
  }

  @override
  set counterView(Counter value) {
    _counterView = value;
    this._counterView.refreshCounter(this._counterViewModel);
  }


}

Adapting it Into The View :

The controller is then bound to the view.dart file so that the increment and decrement functionality may work as depicted.

class HomePage extends StatefulWidget {
  final Presenter presenter;

  HomePage(this.presenter, {Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> implements Counter {
  CounterModel _viewModel;

  @override
  void initState() {
    super.initState();
    this.widget.presenter.counterView = this;
  }

  @override
  void refreshCounter(CounterModel viewModel) {
    setState(() {
      this._viewModel = viewModel;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 30.0),
              child: Text(
                "Click buttons to add and substract.",
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: () {
                    this.widget.presenter.decrementCounter();
                  },
                  tooltip: 'Decrement',
                  child: Icon(Icons.remove),
                ),
                Text(
                  _viewModel?.counter.toString(),
                  style: Theme.of(context).textTheme.display1,
                ),
                FloatingActionButton(
                  onPressed: () {
                    this.widget.presenter.incrementCounter();
                  },
                  tooltip: 'Increment',
                  child: Icon(Icons.add),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Find the code version on github at:

flutter-devs/Flutter_MVP_Demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

Closing Thoughts

Design Pattern is a Quintessential tool in large scale apps in native applications which you can also practice in flutter also. In this Blog, the only MVP has been explained but this will a series of blogs, and in the next blogs, we will be sharing about MVVM, CLEAN, etc.

If you have not used Design Patterns in Flutter, I hope this article has provided you with valuable information about what is all about it, and that you will give it Design Patterns — a Try. Begin using them for your Flutter Apps !!

You can find each part of this series for the posts in the links below:

• Part 1 — Design Pattern MVC
• Part 2 — Design Pattern MVP

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:

And read more articles from FlutterDevs.com

FlutterDevs has been working on Flutter for quite some time now. You can connect with us on Facebook and Twitter for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #Flutter. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!

Thank you for reading. 🌸

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.