Flutter the new design pattern MVSP

As the flutter mix IOS and Android into one single code base run on both of them. I decided to mix the MVP design pattern and Scoped Model package to the new one design pattern called MVSP Model View Scoped Presenter.

This new design pattern MVSP will help you a lot to manage the state of the widget under scoped model descendant widget even with StatelessWidget and make your app flexible, maintainable, and very easy to move any widget in the tree of the app.

So, let’s begin with the little diagram that shows the structure of MVSP.

MVSP Design Pattern

As we see in the diagram, we have the Presenter object and the extended model class from the mother Model class was mixed together.


Time to look more in details about this MVSP.

If you want to apply this article first you must install scoped model package to your project to stay on track, from here.

First, our model class called Person contain simple attribute.

Second, Mock class data.

Third, Production class to fetch real data from API.

-Now we finished the Model data classes.

Fourthly, Presenter class and Injector class. the Presenter class is responsible for fetch data to the Model class. Where Injector class is responsible for the state of the whole app is in Mock or Production mode.

  • Presenter class
  • Injector class

Fifthly, The whole article is waiting to talk about this class. this model class deals with the contract of abstract class and the state of any widget created from it. Notice that this class extend the Model class and implement the contract class. So in this way, we can fetch data and manage the state of the widget at the same time efficiency and professional way.

Sixth,The View class. When we are creating the widget from this class down. This will create Presenter object from it inside contractor. So this will fetch and load data from API immediately. Notice that we were created the Presenter object in initState() method.

finally, The main method you can see the Injector.configure in first of its start this method gives two options which are Mock and Production.


Notice that I can change the state of the widget without even use setState() method to re-render the widget.

At the end of this article, this is the Full app repo on GitHub

Thanks for your time