flutter_app_template

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

環境

Flutter Stable 3.0.5

画面構成

• タブ 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 ライクな設計で構築
• Firebase を利用 (FirebaseAuth, Firestore, Functions, FirebaseAnalytics, FirebaseCrashlytics)
• retrofit を用いた サンプルコード
• ボトムナビゲーション構成のサンプル画面
• 画像選択・保存
• カメラ、画像のパーミッション設定
• 起動時に匿名認証でログイン
• ダークモード対応
• デバイス向きは縦固定
• 静的解析導入
• Android/iOS の Flavor 設定
• iOS 日本語デフォルト
• 画面遷移は Navigator 1.0
• MethodChannelとEventChannelのサンプルコード
  • AndroidはTalkback、iOSはVoiceOverの設定状態の表示
• その他アプリに必要なライブラリを設定済み

※他プロジェクト移行によるビルドエラーを避けるため import は相対パスで実装していますが、移行後は import は絶対パスで利用します。

やっていないこと

• Android/iOS ローカル通知とプッシュ通知の設定
• Android の keystore の設定（debug, release）
• ローカライズ対応
• iPad 対応
• ユニットテスト
• UI テスト
• dartdoc
• fastlane
• WIP device_preview 導入 → Flutter3 系と Freezed2 系対応までお見送り

設計指針

こちらの資料にまとめました。

ディレクトリ構成

• lib/
  • exceptions/
  • extensions/
  • gen/
  • model/
    • converters/
    • entities/
    • repositories/
    • use_cases/
  • presentation/
    • pages/
    • res/
    • widgets/
  • results/
  • utils/
  • main.dart

Flavor

引用: Flutter で Dart-define のみを使って開発環境と本番環境を分ける

実行コマンド

• 開発

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

• 本番

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

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

リリースビルド

• Android

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

• iOS

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

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

1. git clone で取り込む

   git clone https://github.com/hukusuke1007/flutter_app_template.git
   

2. 取り込んだら .git を削除する

   rm -rf .git
   

3. com.example.app を変更したいパッケージ名 にする

   • パッケージ名を変更する

     • iOS:

       Xcode > Runner > TARGETS Runner > Build Settings の Product Bundle Identifier を変更。 Debug, Profile, Release の全てを変更する。$(APP_ID_SUFFIX)はそのままにしてください。

     • Android:

       • android/app/build.gradle

         • applicationId

       • AndroidManifest.xml - package

         • main
         • debug
         • profile

       • MainActivity.kt

         • package

       • kotlin 配下のディレクトリ名を変更する

         （例）com.example.app から com.never.jp へ変更した場合

           変更前: android/app/src/main/kotlin/com/example/app
           変更後: android/app/src/main/kotlin/com/never/jp
         

   • アプリ名を変更する

     • iOS:

       $(APP_NAME_PREFIX)はそのままでそれ以外を変更する

       • info.plist - CFBundleDisplayName
       • info.plist - CFBundleName

     • Android:

       android/app/build.gradle

       • resValue

   • プロジェクト名を変更する

     • flutter_app_template のディレクトリ名を変更する

       （例）flutter_app_template　から never_app へ変更

         変更前: flutter_app_template/
         変更後: never_app/
       

     • pubspec.yaml の name

4. 新しい 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
     

5. Firebase コンソールから匿名認証を 開発環境、本番環境共に ON にする

6. flutter のライブラリを取り込む。 pub get を実行する。 利用するバージョンを固定にするため、pubspec.lock 内のプラグインのバージョンを見て pubspec.yaml のプラグインのバージョンを指定する。

7. 実行コマンドを用いて動作確認する。

8. 問題なければ新しい git repository を作成して本プロジェクトをプッシュする。

9. あとは良しなに使わないプラグインやコードを削除して開発を進めてください。

参考文献

• Dart/Flutter の静的解析強化のススメ
• Flutter/Dart における immutable の実践的な扱い方
• Riverpod の Provider 命名手引き
• mono0926/wdb106-flutter
• Flutter x Riverpod でアプリ開発！実践入門
• Flutter で Dart-define のみを使って開発環境と本番環境を分ける
• altive/flutter_app_template
• 現場で役立つシステム設計の原則