MVP in flutter

MVP Architecture

Models - View - Presenter architecture is an extended version on model - view - controller architecture which is mostly used to design User Interfaces.

In my personal experience MVP is the best design pattern or architecture that you can go for in small scale personal and production projects. I always seen the MVP architecture only been used in native iOS and Android development, but in a framework like flutter which supports and promotes breaking code of and making files as small as possible it's important to have an MVP approach

- Project
    - Android          # already there
    - ios              # already there
    - build            # already there
    - release          # To keep the latest build handy
        - latest.apk
    - assets           # Your typical assets folder
        - fonts
        - images
        - logo
        - JSON/Animation # Lottie .jsons or rive .flrs
    - lib
        - Config         # Config files linke theme.dart and stuff
        - Models         # Various Models
            - DataModels.  # Data models like User model
            - ViewModels.  # View models like provider for a complex animation
        - Service        # Presenter folder
            - API          # handler files for REST API calls
            - firebase.    # handler files for firebase
            - Cache        # handler files for caching data (I prefer hivedb)
            - Global       # Files with global functions and stuff
        - Views          # Various Views
        - Widgets        # Components

Config Folder

This is the so called configs folder containing the configs file. The config files in case of flutter would be files like

ThemeConfig.dart
Router.dart
APISecret.dart

Models Folder

Models folder this is supposed be the Models to be things like user models, response model and things like that. I prefer to put all the providers necessary in here as well

This folder I usually divide into two sub folders:

DataModels
ViewsModels

Servcie

This folder is what would include our presenter part of the MVP pattern. This usually contains things like

API

I use chopper for my API calls so all the service files and the generated .chopper.dart files go here separated in diff. folders
Firebase

This contains all firebase related stuff, like any functions talking to firestore / Firebase Storage functions and things like FCM and dynamic links setup
Cache

This contains files that have functions related to caching function, I use hiveDb so I'd generally have a folder called typeAdapters and have all my adapters there
Global

This is a wrapper folder for files containing global functions, like basic string manipulation and stuff

Views

This is pretty self explanatory containing file related to various views / pages of the app

Widgets

To all web developers this would correspond to the Components folder in your React or Vue app. To others this folder will contain files including reusable widgets

MVP in flutter

Comments

More from this blog

I never finished Venture Deals, so I built a pipeline to read it for me

Building an AI-Powered YouTube Shorts Generator: A Complete Technical Deep Dive

Calculating analytics for webpages

React and Email Templates: Crafting Stunning Templates Made Simple

Learning ROP: Resiliency, Observability and Performance

MVP in flutter

MVP Architecture

Config Folder

Models Folder

Servcie

Views

Widgets

This about it for MVP in flutter I hope this was helpful to you.

Command Palette

Comments

More from this blog

MVP in flutter

MVP Architecture

Config Folder

Models Folder

Servcie

Views

Widgets

This about it for MVP in flutter I hope this was helpful to you.