A MVVM architecture and project structure approaches to developing Flutter apps

Flutter Architecture Blueprints

Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.

Installation

Environment

iOS

  • iOS 13+

Android

  • Android 5.1+
    • minSdkVersion 22
  • targetSdkVersion 30

App architecture

Code Style

Assets, Fonts

If added some assets or fonts

Models

If added some models for api results

Localizations

If added some localizations (i.g. edited *.arb)

Git Commit message style

Code collections

Project settings

Working status Category Description Codes
Dart Dart version pubspec.yaml
asdf asdf .tool-versions
Dart Switching between Development and Production environment constants.dart, runConfigurations, Makefile
Dart Lint / Analyze analysis_options.yaml
Android Kotlin version build.gradle
Android Apk attributes build.gradle (compileSdkVersion, applicationId, minSdkVersion, targetSdkVersion)
Android Switching between Development and Production environment build.gradle, Flavor dirs, signingConfigs
iOS Xcode version compatibilityVersion
iOS Podfile Podfile
iOS Switching between Development and Production environment xcconfig, Podfile
Firebase [Android] Switching between Development and Production google-service.json using flavors development and production
Firebase [iOS] Switching between Development and Production GoogleService-Info.plist using run script copy_google_service.sh, development and production
Firebase Auth SignIn, SignOut auth_data_source_impl.dart
Firebase Crashlytics Crash Reports main.dart
Firebase Performance Network monitoring with dio_firebase_performance app_dio.dart

Architecture

Working status Category Description Codes
Base Using Riverpod + Hooks + ChangeNotifier + MVVM news_page.dart, news_view_model.dart, news_repository.dart, news_data_source.dart
Networking Using dio and Retofit app_dio.dart, news_data_source.dart
Data Using Freezed model classes
Constants Define constants and route names constants.dart
Localization Switching between two languages with Intl package *.arb
Error handling Using Result pattern – A value that represents either a success or a failure, including an associated value in each case. result.dart, news_repository_impl.dart, home_page.dart

UI

Working status Category Description Codes
Theme Staticly Switch between light and dark themes app_theme.dart
Font Using Google font app_theme.dart
Transition Simple animation between screens using Hero article_item.dart, detail_page.dart

Testing

Working status Category Description Codes
API(Repositories) Using mocktail view_mode_test.dart
✅️ UI Using mocktail widget_test.dart
Coverage reports Send the report to Codecov on CI codecov.yml, codecov.sh, flutte-ci.yml

CI

Working status Category Description Codes
Git Git hooks for format and analyze package.json, Makefile
Git .gitignore settings .gitignore
Build Using Codemagic codemagic.yaml
Build Using Bitrise bitrise.yml
Build Using Github Actions .github/workflows/flutter-ci.yml

Getting Started

Setup

$ make setup
$ export PATH="$PATH":"$HOME/.pub-cache/bin" # Add your run-commands (.zshrc, .bashrc, etc)
$ make dependencies
$ make build-runner

How to add assets(images..)

  1. Add assets
  2. Run FlutterGen

How to add localizations

  1. Edit *.arb files.
  2. Run generate the flutter pub get

Make .apk and .ipa file

Android

$ make build-android-dev
$ make build-android-prd

iOS

$ make build-ios-dev
$ make build-ios-prd

Run app

$ make run-dev
$ make run-prd

Special Thanks.

Contributors

GitHub

View Github