A MVVM architecture and project structure approaches to developing Flutter apps

by Flutter Awesome

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