Flutter Starter Architecture (MVVM)

August 16, 2021 Flutter App

Short Intro: Starter architectures for your next Flutter project in order to make it scalable and easy for maintenance and tests.

Flutter Starter Architecture (MVVM)

My custom starter project for Flutter apps.

I was looking for a simple way to build Flutter app in a scalable and clear way way to operate. So I’ve spent a little to search for how to implement an MVVM architecture in a proper and efficient way for scalable apps. This is the first result of my research. I use it for two projects now. This one provide an MVVM architecture powered by get_it and provider. This work was mainly inspired by the work of Filledstacks.

Overview

I have made:

a helpers folder where I have put all the utilities of the project such as constant values, dart enumerate, extensions, theming, and other general utilities.
a models folder where I have put all the data’s classes representation.
a services folder where I have put all folders relative to data’s storing and fetching base on local storage, firebase, or API.
a viewmodels folder where I put all the viewmodels related files. In the easiest way, I call viewmodel a bridge between the models, services, and views. Their job is to handle the business logic of the view they are related to in order to make the views part safe from anything non-relevant to UI.
a views folder where are stored the UI part of the application. Each view/page/screen of the application is put here in differents folders. Those folders contain the base file of the view and a widgets folder where are stored the widgets which are used only on this view. The global widgets are located in the widgets folder.

I have also added a base class for viewmodels here. All the next viewmodels you’ll write should inherit from the BaseViewModel class. There is also a BaseView widget here to mix the access easily to the base viewmodel proper to each class.

At the root of the app, you will see the locator.dart file where I registered an instance of each service and viewmodel in order to use them efficiently in the whole app. You will also find the routes.dart where the named routes of the app are stored in the AppRouter class.