Flutter Architecture Blueprints
Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.
Documentation
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
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)
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-runnerHow to add assets(images..)
- Add assets
- Run FlutterGen
How to add localizations
- Edit *.arb files.
- Run generate the
flutter pub get
Make .apk and .ipa file
Android
$ make build-android-dev
$ make build-android-prdiOS
$ make build-ios-dev
$ make build-ios-prdRun app
$ make run-dev
$ make run-prdSpecial Thanks.
Contributors