Design Patterns in Flutter -Part 3 (MVVM)
Design Pattern in Flutter is very important in developing flutter application and for its better understanding I would request you all to go through my previous blogs Design Patterns in Flutter -Part 1(MVC) and Design Patterns in Flutter -Part 2(MVP), I hope it will clear your every doubt regarding design pattern and the difference between the Design pattern and Software Architecture.
In this blog, we will dive deeper into the significance of Model View ViewModel (MVVM) architecture of Flutter, used for implementing app designs. The MVVM pattern provides a uniform distribution of data with the benefits of flexibility and reusability of the code as well as data.
MVVM was introduced by Microsoft in 2005 and since then MVVM architecture and its components have been an essential tool in app development projects.
What is MVVM?
Looking at the definition of MVVM it is the abbreviation of three words namely Model, View, and View Model. The concept of MVVM is to build a view model that can represent the data through a view.
So by looking at the flow diagram of MVVM, we could see that the view model occupies the central position which sends and receives the data from the model and provide the data to the view, it also observes the data changes that occurred at the view and responds accordingly using the model to the view. To write an adaptable codebase, app developers need to build a View-Model layer that can be utilized by several ‘Views’. Now we will look at each individual component individually.
The Model
The Model in the MVVM design pattern represents the actual data(real-time) which will be used in application development. for example, we could understand with the help of a real-time scenario of the bank where this element will be the account number, having a person’s name and address.
for better understanding, you could say that the Model can only reflect the actual data, not the characteristics or any feature related to the application. It means you can’t manipulate the way how the data will be represented or formatted. Each item in the dataset will be representing its own model when the data is fetched.
Mainly the Model is kept in away from the logic part for neat code but sometimes it includes the validation logic as well.
The View
The View in the MVVM design pattern represents the Interface that the user gets to interact with the application. This element utilizes a set of libraries to present the data more accurately and appropriately.
This element also possesses the property to utilize behaviors associated with the Model, such as identifying and act according to user input. The View can handle the actions done by a user, which can be manipulated by the Model’s functionalities.
The View Model
The most essential element of MVVM architecture is ViewModel, which presents the View part separately from the Model. This element makes the Model hold the actual data, and the View part holds the formatted or updated data while keeping the controller as an interface between them.
As an interface, the controller has all the records of user input in the view to place them in the model. Or, it can interact with a function of the View to retrieve the data from the Model, then translating the properties to merge it with the View.
The ViewModel also possesses access to the methods, function calls, and other factors that can help to maintain the actual state of the View. Moreover, this access also allows ViewModel to manipulate or moderate the Model according to the behaviors in the view while triggering its processes.
While building the MVVM design pattern, these elements play a crucial role. As their properties include consistent synchronization with each other, users can have the leverage to interact with the application smoothly.
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 HTTP and Provider package under the dependencies in
pubspec.yamlfile.
dependencies:
http: ^0.12.1
provider: ^4.1.3
Create UI:
/media/3f6855e0e5dc194c8b7ae561d8b1771b
This shows the View part of the MVVM design pattern, In this, we are getting the movie list from the Model.
Create Web Service:
/media/06d5ed40145a0089fd682c21c3fdac67
This Denotes the Model of the MVVM design pattern.
Create a view model:
Create a model class named movie.dart:
/media/d9d76145f90fc888d7567a9d06d5cb19
This is the View Model which takes data from the model and makes it accessible to View.
Create a widget :
/media/3c6d77c7d4c0b9bd947c9f27d37d7ab1
Creating the main file :
/media/035c827e90903182a9ac057964860ad6
Find the code version on GitHub at:
flutter-devs/flutter_mvvm_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Why MVVM for Flutter?
The most common issue that app developers face is the consistency in the whole codebase. Even a small change in a single thread creates plenty of bugs while testing the application. This results in a lack of tight coupling.
MVVM architecture has the capability to overcome these hiccups and deliver better design patterns for the app. All the complexities will get a halt with these patterns.
Here are the ways through which it overcomes these hiccups:
- Tight Coupling:- Only View(Activity) holds the reference to ViewModel and not vice versa, this solves a tight coupling issue. A single view can hold a reference to multiple ViewModels. Here, the reference to any ViewModel is kept only by the View. As a result, the problem with tight coupling will remain solved.
- Testability:- ViewModels can easily represent the data or the state. Hence, they can be tested independently without requiring to know how data is processed. This happens because ViewModels are independent of the Views.
- Code Sharing and Usability:- MVVM architecture allows this objective to get fulfilled with the help of Models. This layer can be utilized for building design patterns in other applications as well, without modifying codes.
You can find each part of this series for the posts in the links below:
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
