Flutter Architecture Blueprints

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

Documentation

• Install Flutter
• Flutter documentation
• Contributing to Flutter

Installation

• asdf
  • Dart 2.14.4
  • Flutter 2.5.3
• npm (for git hooks)

Environment

iOS

• iOS 13+

Android

• Android 5.1+
  • minSdkVersion 22
• targetSdkVersion 30

App architecture

• Base on MVVM + Repository

Code Style

• flutter_lints

Assets, Fonts

If added some assets or fonts

• Use FlutterGen

Models

If added some models for api results

• Use Freezed

Localizations

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

• Use Official Flutter localization package

Git Commit message style

• Semantic Commit Messages

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.

• News API

Contributors

• lcdsmao