Start a Project

MVVM in Flutter

Flutter, a well-known open-source UI software development kit developed by Google as of my most recent update in September 2021, is not intrinsically based on the MVVM (Model-View-ViewModel) architecture.

  1. Model: Represents the data and business logic of the application. It could be anything from simple data objects to complex services and databases.
  2. View: Represents the user interface. In Flutter, the view is typically built using widgets.
  3. ViewModel: Acts as a middleman between the View and the Model. It holds the application’s state, processes user input from the View, communicates with the Model, and updates the View accordingly.

Read more about Flutter app development from mobikul.

Model

The model serves as a single source of truth for database-related queries or real-time retrieve data.

This layer may include code validation, business logic, etc. This layer communicates with ViewModel in real-time or for local data. In response to the ViewModel, data are provided.

ViewModel

ViewModel serves as a liaison between View and Model, accepting all user events and communicating those requests for data to the Model. When the model has data, it goes back to the viewmodel, which then notifies the view of the information.

A single ViewModel can supply data to several Views because it can be used by multiple views.

View

The view is the area of the screen where the user interacts with the Widgets displayed there. These user events call for a few actions that direct users to the ViewModel, where the rest of the ViewModel completes the task. ViewModel updates View once it has the necessary data.

Result

Conclusion

Congratulations!! You have learned about the MVVM in Flutter.

Nowadays, MVVM is widely utilized because it enables an event-driven approach, which is essential because many flutter components operate based on events.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Always be ready for learning.

Exit mobile version