Flutterexperts

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 !!

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. 🌸