Flutter + MVC + ScopedModel

By now, you probably heard about a framework called Flutter. It's an open-source framework maintained by Google and a framework that you can develop an application for almost all major platforms available in the market; we can take an example like Android, IOS, Linux, and many more.

My topic today is about my experience in achieving the best way of implementing a flutter project using an efficient design pattern. Well, I know for sure, the first thing that will come to your mind is MVC (Model, View, and Controller) method of design. By default, flutter comes with nothing but it's you who is going to decide what design pattern to apply; which in my perspective; is very flexible as it'll not restrict you to create your own design pattern. But hold on amigo; this doesn't mean you should go and act like a maniac to create a non-readable or somehow difficult project for contributors.

What design pattern should we follow?

Before answering this question, there are a lot of articles and blogs regarding the best way of creating a flutter project. They're all great and so enlightening when considering to create a more standardized and more readable flutter project. Here is one reference that you might find it interesting: Flutter + MVC at Last! By Greg Perry. I even found this article so great in the sense that it gives you how you should really know MVC and apply it on flutter projects.

But ...

Let me start this paragraph with an example. Suppose you have a welcome page for an app that only shows a welcome screen and then after a time delay it goes to our second page; which is our login page. We can assume and initiate our project believing to have two components; or better say two MVC entities. And on the second thought, we decided to add a third page which is our Dashboard page; that will be also appended as a third MVC entity to our project. All MVC's have common attributes among them. They have a model that contains the data structure that the page requires, the view component which holds our widgets, and finally our controller or better say "presenter" to control what happens when an event is fired from our UI/Widget components. Now, let us think about how we can share data model instances whereby all MVC entities can share among them. For example, I may need the users name which I've retrieved on the login page to show it on the Dashboard page. In that case we need a delicate method to share our data model instances among our MVC's.

ScopedModel: Our Saviour!

On that matter, we can use a library called scoped model. Its main duty is to share a data model to any component that inherits it. By adjusting our project with this library; we can easily share our data models among all of the MVC entities. Finally, I've reconfigured our MVC's controller/presenter component to be tied up with the ScopedModel library and making their data be available to each other. In that way, we've successfully managed to implement an MVC design pattern having a rigid method of sharing data among them.

Example Repository

I've created a flutter project called "Support COVID Victim Families" which shows the noble COVID-19 status as per country and news in real-time. It also shows some victims who're in need of support because of this pandemic. (Initially created for that purpose). That project is created using flutter with MVC design pattern having the support of ScopedModel library. Github Source Repository. API sources for the status as per country is from "Novel COVID API" V1 and the News API from NewsAPI.Org.