wasabeef / flutter-architecture-blueprints

Flutter Architecture Blueprints is a project that introduces 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.

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

flutter-architecture-blueprints's Issues

Dio is not working for web

You can delete this, I will open an issue on dio github, sorry.

I tried to make dio work with web but I had this exception

Exception has occurred. "Error: Unsupported operation: Platform._version at Object.throw_ [as throw] (http://localhost:51148/dart_sdk.js:5037:11) at Function._version (http://localhost:51148/dart_sdk.js:53428:17) at Function.get version [as version] (http://localhost:51148/dart_sdk.js:53502:27) at get _version (http://localhost:51148/dart_sdk.js:53372:27) at Function.desc.get [as _version] (http://localhost:51148/dart_sdk.js:5526:17) at Function.get version [as version] (http://localhost:51148/dart_sdk.js:53346:26) at Object._getHttpVersion (http://localhost:51148/dart_sdk.js:188568:31) at new _http._HttpClient.new (http://localhost:51148/dart_sdk.js:183769:28) at Function.new (http://localhost:51148/dart_sdk.js:178274:16) at io_adapter.DefaultHttpClientAdapter.new.[_configHttpClient] (http://localhost:51148/packages/dio/src/adapters/io_adapter.dart.lib.js:169:56) at io_adapter.DefaultHttpClientAdapter.new.fetch (http://localhost:51148/packages/dio/src/adapters/io_adapter.dart.lib.js:64:50) at fetch.next (<anonymous>) at runBody (http://localhost:51148/dart_sdk.js:37393:34) at Object._async [as async] (http://localhost:51148/dart_sdk.js:37424:7) at io_adapter.DefaultHttpClientAdapter.new.fetch (http://localhost:51148/packages/dio/src/adapters/io_adapter.dart.lib.js:60:20) at dio_service.AppDio.__._dispatchRequest (http://localhost:51148/packages/dio/src/interceptors/log.dart.lib.js:1254:56) at _dispatchRequest.next (<anonymous>) at http://localhost:51148/dart_sdk.js:37374:33 at _RootZone.runUnary (http://localhost:51148/dart_sdk.js:37245:59) at _FutureListener.thenAwait.handleValue (http://localhost:51148/dart_sdk.js:32501:29) at handleValueCallback (http://localhost:51148/dart_sdk.js:33028:49) at Function._propagateToListeners (http://localhost:51148/dart_sdk.js:33066:17) at _Future.new.[_completeWithValue] (http://localhost:51148/dart_sdk.js:32914:23) at async._AsyncCallbackEntry.new.callback (http://localhost:51148/dart_sdk.js:32935:35) at Object._microtaskLoop (http://localhost:51148/dart_sdk.js:37497:13) at _startMicrotaskLoop (http://localhost:51148/dart_sdk.js:37503:13) at http://localhost:51148/dart_sdk.js:33274:9"

Build apk!

Hi,
Thanks for the amazing blueprint i run the project and i want to make apk for android dev / prod but is give me error in cmd
can you help me with this
Thanks.

girishparate@Girishs-iMac flutter-architecture-blueprints-main % make build-android-dev
fvm flutter build apk --flavor development --dart-define=FLAVOR=development --target lib/main.dart
make: fvm: No such file or directory
make: *** [build-android-dev] Error 1
girishparate@Girishs-iMac flutter-architecture-blueprints-main % 

How to you guard or guardFuture in case of post or patch call

Suppose there is some get call like this

abstract class NewsRepository {
       Future<Result<News>> getNews(int page, String category, String mode)
}

Scaffold.of() called with a context that does not contain a Scaffold.

Scaffold.of() called with a context that does not contain a Scaffold.

Maybe you can solve this problem by adding ScaffoldStateGlobalKey.

RxDart + Cache in Local Storage

Hello, Can you add an example code to show how combining operators with RxDart and offline/Online mode by hive/SQLite?

Example:
Cases 1: Show offline cache for the first time and update online data after request API success.
Cases 2: Load heavy file from local storage by RxDart

Thanks.

Better to use "flutter build ipa"

Content

It is better to use "flutter build ipa" in the Makefile to save the time of archiving.
However, since you need to specify "TEAM_ID" and "provisioning profile name" in the ExportOptions file, you need to consider whether to add it as a template.

Makefileで「flutter build ipa」を使ったほうがテストフライトの手間が省けます。
しかし、ExportOptionsファイルには「TEAM_ID」や「プロビジョニングプロファイル名」などを指定する必要があるので、テンプレートとして追加するかは検討が必要です。

Link

• https://medium.com/flutter-jp/ipa-e176de0276c6
• https://flutter.dev/docs/deployment/ios#create-a-build-archive

Sample

Makefile

.PHONY: build-ios-dev
build-ios-dev:
	fvm flutter build ipa --flavor Development --dart-define=FLAVOR=development --target lib/main.dart --export-options-plist=ios/Config/DevelopmentExportOptions.plist

DevelopmentExportOptions.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>compileBitcode</key>
	<true/>
	<key>destination</key>
	<string>export</string>
	<key>method</key>
	<string>ad-hoc</string>
	<key>provisioningProfiles</key>
	<dict>
		<key>jp.co.xxxxxx.dev</key>
		<string>XXX Development（Ad Hoc）</string>
	</dict>
	<key>signingCertificate</key>
	<string>Apple Distribution</string>
	<key>signingStyle</key>
	<string>manual</string>
	<key>stripSwiftSymbols</key>
	<true/>
	<key>teamID</key>
	<string>XXXXXXXXXX</string>
	<key>thinning</key>
	<string>&lt;none&gt;</string>
</dict>
</plist>

Project Setup

Because app depends on flutter_localizations any from sdk which depends on intl 0.17.0-nullsafety.2, intl 0.17.0-nullsafety.2 is required.

My Flutter version is
Flutter 1.26.0-1.0.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision 63062a6443 (2 weeks ago) • 2020-12-13 23:19:13 +0800
Engine • revision 4797b06652
Tools • Dart 2.12.0 (build 2.12.0-141.0.dev)

Navigation from model

First of all thank you very much for this great project!
It is a great resource to understand riverpod and learn the techniques, I just have a very basic and beginner question:
at the current state of your project is there a way to navigate from any of your models to a different view or it requires some sort of implementation?

Thank you!

Build failed due to use of deprecated Android v1 embedding

Desktop support

Does all the used packages support desktop? what will I need to change to add desktop support?

RBAC for users permissions management

Hi @wasabeef ,

Hope you are all well !

I was wondering if it would not be a great feature to implement a RBAC control on users.

Some refs:

https://github.com/wilpar/flutter_rbac
https://github.com/casbin/dart-casbin
What do you think about that ?

Cheers,
Luc

`sqflite` support

Hi, can you add an example code just to show how a local data source is integrated?

directory name "lib/data/provier" is wrong

directory name "lib/data/provier" is wrong, correctly "provider".

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency mocktail to ^0.3.0
• Update dependency mocktail_image_network to ^0.3.0
• Update actions/cache action to v3
• Update actions/checkout action to v3
• Update actions/setup-java action to v3
• Update dependency auto_route to v4
• Update dependency auto_route_generator to v4
• Update dependency flutter_lints to v2
• Update dependency freezed to v2
• Update dependency freezed_annotation to v2
• Update dependency husky to v8
• Update dependency retrofit_generator to v4
• Update subosito/flutter-action action to v2

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency com.google.firebase:firebase-crashlytics-gradle to v2.8.1
• Lock file maintenance

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update actions/cache action to v2.1.7
• Update dependency com.android.tools.build:gradle to v7.2.0
• Update dependency firebase_performance to ^0.8.0
• Update dependency gradle to v7.4.2
• Update dependency flutter_svg to v1
• Update dependency json_serializable to v6
• Update dependency retrofit to v3
• Click on this checkbox to rebase all open PRs at once

---

• Check this box to trigger a request for Renovate to run again on this repository

type '_$_Article' is not a subtype of type 'Iterable<dynamic>'

This error happens on tapping any of article cards.

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.0, on macOS 11.4 20F71 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.57.1)
[✓] Connected device (2 available)

This template is larger than 10 megabytes

So, i was trying to use this template and then GitHub produces error that "The template you used includes files that are larger than 10 megabytes." See below screenshots.

Doubled requests

Requests in this repo are doubled (being sent twice). For example fetchNews().

It's not "options" call. And I can see on two get requests on the API side (in case of change newsapi to custom)
Log below from clean repo.
First
I/flutter (23841): *** Request ***
I/flutter (23841): uri: https://newsapi.org/v2/everything?q=anim&from=2021-06-09&sortBy=publishedAt&language=en&apiKey=98c8df982b8b4da8b86cd70e851fc521
I/flutter (23841): method: GET
I/flutter (23841): responseType: ResponseType.json
I/flutter (23841): followRedirects: true
I/flutter (23841): connectTimeout: 30000
I/flutter (23841): sendTimeout: 30000
I/flutter (23841): receiveTimeout: 30000
I/flutter (23841): receiveDataWhenStatusError: true
I/flutter (23841): extra: {}
I/flutter (23841): headers:
I/flutter (23841): User-Agent: FAB Dev/1.0.0-Dev (Android 11; sdk_gphone_x86_arm; generic_x86_arm; x86)
I/flutter (23841): Sec-CH-UA-Arch: x86
I/flutter (23841): Sec-CH-UA-Model: sdk_gphone_x86_arm
I/flutter (23841): Sec-CH-UA-Platform: Android
I/flutter (23841): Sec-CH-UA-Platform-Version: 11
I/flutter (23841): Sec-CH-UA: "FAB Dev"; v="1.0.0-Dev"
I/flutter (23841): Sec-CH-UA-Full-Version: 1.0.0-Dev
I/flutter (23841): Sec-CH-UA-Mobile: ?1
I/flutter (23841): data:
I/flutter (23841): {}
I/flutter (23841):

First response
I/flutter (23841): *** Response ***
I/flutter (23841): uri: https://newsapi.org/v2/everything?q=anim&from=2021-06-09&sortBy=publishedAt&language=en&apiKey=98c8df982b8b4da8b86cd70e851fc521
I/flutter (23841): statusCode: 200
I/flutter (23841): headers:
I/flutter (23841): connection: keep-alive
I/flutter (23841): cache-control: no-cache
I/flutter (23841): transfer-encoding: chunked
I/flutter (23841): date: Wed, 07 Jul 2021 16:31:17 GMT
I/flutter (23841): content-encoding: gzip
I/flutter (23841): cf-cache-status: DYNAMIC
I/flutter (23841): report-to: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v2?s=QFym99f%2FD2ApRKAqXH%2FPjAoEj%2FShsb3LPRWcIyOb8iV9s1XjCRXxqFUmghIAgTwHb1MiHDGTXcC1RvPS30gZbPsDgmWsYWM2SFcr281dRf8%2BGQwKpOW4tA%3D%3D"}],"group":"cf-nel","max_age":604800}
I/flutter (23841): pragma: no-cache
I/flutter (23841): content-type: application/json; charset=utf-8
I/flutter (23841): expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
I/flutter (23841): x-cached-result: false
I/flutter (23841): server: cloudflare
I/flutter (23841): nel: {"report_to":"cf-nel","max_age":604800}
I/flutter (23841): cf-ray: 66b2764f3c6024a1-KBP
I/flutter (23841): expires: -1
I/flutter (23841): Response Text:
I/flutter (23841): {"status":"ok","totalResults":66,"articles":[{"source":{"id":null,"name":"Nature.com"},"author":"Abdelfattah Selim, Hanem Khater, Hamdan I. Almohammed","title":"A recent update about seroprevalence of ovine neosporosis in Northern Egypt and its associated risk factors","description":"Neospora caninum (Family: Sarcocystidae) is an obligate intracellular protozoan. It is one of the most critical abortifacients in ruminants. The seroprevalence of antibodies against N. caninum and its risk factors was investigated among 430 sheep from four No…","url":"https://www.nature.com/articles/s41598-021-93596-9?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+srep%2Frss%2Fcurrent+%28Scientific+Reports%29","urlToImage":"https://media.springernature.com/m685/springer-static/image/art%3A10.1038%2Fs41598-021-93596-9/MediaObjects/41598_2021_93596_Fig1_HTML.png","publishedAt":"2021-07-07T00:00:00Z","content":"

1.Selim, A. & Abdelhady, A. Neosporosis among Egyptian camels and its associated risk factors. Trop.

Second:
I/flutter (23841): *** Request ***
I/flutter (23841): uri: https://newsapi.org/v2/everything?q=anim&from=2021-06-09&sortBy=publishedAt&language=en&apiKey=98c8df982b8b4da8b86cd70e851fc521
I/flutter (23841): method: GET
I/flutter (23841): responseType: ResponseType.json
I/flutter (23841): followRedirects: true
I/flutter (23841): connectTimeout: 30000
I/flutter (23841): sendTimeout: 30000
I/flutter (23841): receiveTimeout: 30000
I/flutter (23841): receiveDataWhenStatusError: true
I/flutter (23841): extra: {}
I/flutter (23841): headers:
I/flutter (23841): User-Agent: FAB Dev/1.0.0-Dev (Android 11; sdk_gphone_x86_arm; generic_x86_arm; x86)
I/flutter (23841): Sec-CH-UA-Arch: x86
I/flutter (23841): Sec-CH-UA-Model: sdk_gphone_x86_arm
I/flutter (23841): Sec-CH-UA-Platform: Android
I/flutter (23841): Sec-CH-UA-Platform-Version: 11
I/flutter (23841): Sec-CH-UA: "FAB Dev"; v="1.0.0-Dev"
I/flutter (23841): Sec-CH-UA-Full-Version: 1.0.0-Dev
I/flutter (23841): Sec-CH-UA-Mobile: ?1
I/flutter (23841): data:
I/flutter (23841): {}
I/flutter (23841):

Second response:
I/flutter (23841): *** Response ***
I/flutter (23841): uri: https://newsapi.org/v2/everything?q=anim&from=2021-06-09&sortBy=publishedAt&language=en&apiKey=98c8df982b8b4da8b86cd70e851fc521
I/flutter (23841): statusCode: 200
I/flutter (23841): headers:
I/flutter (23841): connection: keep-alive
I/flutter (23841): cache-control: no-cache
I/flutter (23841): transfer-encoding: chunked
I/flutter (23841): date: Wed, 07 Jul 2021 16:31:17 GMT
I/flutter (23841): content-encoding: gzip
I/flutter (23841): cf-cache-status: DYNAMIC
I/flutter (23841): report-to: {"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v2?s=6M6lT3eWN3RxFno9EeyWeCMci7dTGUuGUO3gRMauf4iVa3l7P8PwKQ%2BESCwCUroMuqKQz2gcQ2u6jDlXAiJeF7R2q3RxChLvyl2QaIQKqS5wiPaPRlf2eg%3D%3D"}],"group":"cf-nel","max_age":604800}
I/flutter (23841): pragma: no-cache
I/flutter (23841): content-type: application/json; charset=utf-8
I/flutter (23841): expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
I/flutter (23841): x-cached-result: true
I/flutter (23841): server: cloudflare
I/flutter (23841): x-cache-remaining: 99
I/flutter (23841): nel: {"report_to":"cf-nel","max_age":604800}
I/flutter (23841): cf-ray: 66b27654ada624a1-KBP
I/flutter (23841): x-cache-expires: Wed, 07 Jul 2021 16:36:10 GMT
I/flutter (23841): expires: -1
I/flutter (23841): Response Text:
I/flutter (23841): {"status":"ok","totalResults":66,"articles":[{"source":{"id":null,"name":"Nature.com"},"author":"Abdelfattah Selim, Hanem Khater, Hamdan I. Almohammed","title":"A recent update about seroprevalence of ovine neosporosis in Northern Egypt and its associated risk factors","description":"Neospora caninum (Family: Sarcocystidae) is an obligate intracellular protozoan. It is one of the most critical abortifacients in ruminants. The seroprevalence of antibodies against N. caninum and its risk factors was investigated among 430 sheep from four No…","url":"https://www.nature.com/articles/s41598-021-93596-9?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+srep%2Frss%2Fcurrent+%28Scientific+Reports%29","urlToImage":"https://media.springernature.com/m685/springer-static/image/art%3A10.1038%2Fs41598-021-93596-9/MediaObjects/41598_2021_93596_Fig1_HTML.png","publishedAt":"2021-07-07T00:00:00Z","content":"

1.Selim, A. & Abdelhady, A. Neosporosis among Egyptian camels and its associated risk factors. Trop.

The getter 'articles' was called on null.

There is a relatively low probability that this error will occur.

Solution, maybe you can try to add a simple judgment.

Can you write an article on the Architecture and the data flow?

This is tough to understand for people getting into MVVM, going through various files and understanding all the code. Also, the advantages of MVVM, apart from better testing, especially in Flutter.