Name		Name	Last commit message	Last commit date
parent directory ..
.fvm		.fvm
.vscode		.vscode
android		android
assets		assets
doc/images		doc/images
integration_test/features		integration_test/features
ios		ios
lib		lib
obfuscate		obfuscate
sh		sh
test		test
.gitattributes		.gitattributes
.gitignore		.gitignore
.metadata		.metadata
.tool-versions		.tool-versions
LICENSE		LICENSE
Makefile		Makefile
README.md		README.md
analysis_options.yaml		analysis_options.yaml
build.yaml		build.yaml
mason.yaml		mason.yaml
pubspec.lock		pubspec.lock
pubspec.yaml		pubspec.yaml

README.md

[FeatureFirst] flutter_app_template

Flutter + Firebase アプリのスターターキット、新規アプリ開発はこのテンプレートをベースに始める。

カテゴリ	説明
状態管理と DI	flutter_hooks, hooks_riverpod
データモデル	freezed, equatable
クラウド DB	cloud_firestore
ローカル DB	shared_preferences
API クライアント	retrofit
画面遷移	go_router
Flavor設定	--dart-define
テスト	flutter_test, integration_test, mockito

画面構成

タブ 1
- Hero アニメーションによるモーダル表示
- SharedPreferences を用いたカウンター画面
- Firestore を用いたカウンター画面
- メールアドレス認証のサンプル
- タイムラインのサンプル
タブ 2
- GithubApi を用いた Github Users の一覧画面
タブ 3
- Firestore を用いた Memo データ一覧と CRUD
  - データの追加、更新、削除
  - データ一覧の Pull-to-refresh
  - データ一覧の Infinite Scroll Pagination
タブ 4
- 設定画面
  - プロフィール「名前」「誕生日」「画像」の表示と保存
  - アプリ名、パッケージ名、バージョンを表示
  - 株式会社 Never の URL を WebView で表示
  - ログアウト

実装済み

iOS14、Android7 以上で動作
DDDライクなFeatureFirst構成で設計
Firebase を利用 (FirebaseAuth, Firestore, Functions, FirebaseAnalytics, FirebaseCrashlytics)
retrofit を用いたサンプルコード
画面遷移は go_router（ShellRouteは未対応）
ボトムナビゲーション構成のサンプル画面
画像選択・保存
カメラ、画像のパーミッション設定
起動時に匿名認証でログイン
ダークモード対応
デバイス向きは縦固定
静的解析導入
Android/iOS の Flavor 設定
iOS 日本語デフォルト
MethodChannelとEventChannelのサンプルコード
- AndroidはTalkback、iOSはVoiceOverの設定状態の表示
その他アプリに必要なライブラリを設定済み
fvm, asdf
Unit tests（オフラインテスト）
Widget tests（オフラインテスト）
Integration tests（E2Eテスト）

やっていないこと

Android/iOS ローカル通知とプッシュ通知の設定
Android の keystore の設定（debug, release）
ローカライズ対応
dartdoc
fastlane
テストでスクリーンショット撮影

設計指針

ディレクトリ構成

lib/
- core/
  - converters/
  - custom_hooks/
  - entities/
  - exceptions/
  - extensions/
  - repositories/
  - res/
  - router/
  - use_cases/
  - utils/
  - widgets/
- features/
  - app_wrapper/
  - authentication/
  - error/
  - counter/
  - github_users/
  - home/
  - memo/
  - setting/
  - start_up/
  - timeline/
- app.dart
- main.dart

Flavor

環境	パッケージ名	アプリ名
開発	com.example.app.dev	dev.テンプレアプリ
本番	com.example.app	テンプレアプリ

実行コマンド

開発

flutter run --debug --dart-define=FLAVOR=dev

本番

flutter run --debug --dart-define=FLAVOR=prod

Android Studio から実行する場合は、以下のように Run Configurations を設定する。

dev環境でビルドする場合

prod環境でビルドする場合

Masonを使ってFeatureディレクトリを作成する

masonに登録されているbrickを取り込む

mason get

featureを実行してディレクトリを作成する

mason make feature

作成したディレクトリをlib/featuresへ移動して実装する

リリースビルド

Android

# dev
flutter build appbundle --release --dart-define=FLAVOR=dev

# prod
flutter build appbundle --release --dart-define=FLAVOR=prod

iOS

# dev
flutter build ipa --release --dart-define=FLAVOR=dev

# prod
flutter build ipa --release --dart-define=FLAVOR=prod

テスト

Unit tests

# Run all tests
flutter test

# Run target test
flutter test test/features/github_users/repositories/github_api_repository_test.dart

ドキュメント

Testing Flutter apps: Unit tests

Widget tests

# Run all tests
flutter test

# Run target test
flutter test test/features/github_users/pages/github_users_page_test.dart

ドキュメント

Testing Flutter apps: Widget tests

Integration tests

実機・シミュレータを起動させるので、実行コマンドにflavor設定のjsonを指定してください。

# Run all tests
flutter test --dart-define=FLAVOR=dev integration_test

# Run target test
flutter test --dart-define=FLAVOR=dev integration_test/features/github_users/pages/github_users_page_test.dart

ドキュメント

Testing Flutter apps: Integration tests

モック

mockitoを利用しています。モックのDIはRiverpodの overrides を利用しています。

ドキュメント

新規プロジェクトへの移行方法

git clone で取り込み、作業用ディレクトリへコピーする

git clone https://github.com/hukusuke1007/flutter_app_template.git
cp -rf feature_first/ [作業用ディレクトリのパス]
cd [作業用ディレクトリのパス]

取り込み後、作業用ディレクトリ内の.gitを削除する
```
rm -rf .git
```
変更したいアプリ名、パッケージ名、プロジェクト名にする。以下の通り手動で修正するか、change_app_package_nameを使って自動で修正する。
- アプリ名を変更する
  - iOS:
    
    $(APP_NAME_PREFIX)はそのままで、それ以外を変更する
    - info.plist - CFBundleDisplayName
    - info.plist - CFBundleName
  - Android:
    
    android/app/build.gradle
    - resValue
- com.example.app のパッケージ名を変更する
  - iOS:
    
    Xcode > Runner > TARGETS Runner > Build Settings の Product Bundle Identifier を変更。 Debug, Profile, Release の全てを変更する。$(APP_ID_SUFFIX)はそのままにしてください。
  - Android:
    - android/app/build.gradle
      - namespace
      - applicationId
    - AndroidManifest.xml - package
      - main
      - debug
      - profile
    - MainActivity.kt
      - package
    - ScreenReaderPlugin.kt
    - kotlin 配下のディレクトリ名を変更する
      
      （例）com.example.app から com.never.jp へ変更した場合
      変更前: android/app/src/main/kotlin/com/example/app 変更後: android/app/src/main/kotlin/com/never/jp
- プロジェクト名を変更する
  - pubspec.yaml の name
新しい Firebase プロジェクトを構築する。開発環境、本番環境の 2 種類用意する。なお、開発環境のパッケージ名の末尾は必ず .dev を付与する。
- Firebase の構築方法
構築した Firebase の設定ファイルを以下の場所へ設置する
- Android
```
# 開発環境
android/app/src/dev/google-services.json
# 本番環境
android/app/src/prod/google-services.json
```
- iOS
```
# 開発環境
ios/dev/GoogleService-Info.plist
# 本番環境
ios/prod/GoogleService-Info.plist
```
Firebase コンソールから匿名認証を開発環境、本番環境共に ON にする
Flutter のライブラリを取り込む。 pub get を実行する。利用するバージョンを固定にするため、pubspec.lock 内のプラグインのバージョンを見て pubspec.yaml のプラグインのバージョンを指定する。
実行コマンドを用いて動作確認する。
問題なければ新しい git repository を作成して本プロジェクトをプッシュする。
あとは良しなに使わないプラグインやコードを削除して開発を進めてください。

注意

タイムライン機能を確認するためには、Firestoreのpostsコレクションのindexを設定してください。

Files

feature_first

Directory actions

More options

Directory actions

More options

Latest commit

History

feature_first

Folders and files

parent directory

[FeatureFirst] flutter_app_template

画面構成

実装済み

やっていないこと

設計指針

ディレクトリ構成

Flavor

実行コマンド

Masonを使ってFeatureディレクトリを作成する

リリースビルド

テスト

Unit tests

Widget tests

Integration tests

モック

新規プロジェクトへの移行方法

注意