Flutter Architecture Blueprints
Flutter Architecture Blueprints is a project that introduces MVVM architecture and project structure approaches to developing Flutter apps.
Documentation
Requirements
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 |
✅ | FVM | Flutter Version Management | .fvm/fvm_config.json |
✅ | 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
And set your IDE for FVM path.
How 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-prd
iOS
$ make build-ios-dev
$ make build-ios-prd
Run app
$ make run-dev
$ make run-prd
Special Thanks.
Contributors