LoginSignup
5
1
お題は不問！Qiita Engineer Festa 2024で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@ryamate(やまて)in株式会社スマレジ

Flutter+Firebaseアプリテンプレートの導入方法(hukusuke1007/flutter_app_template)

Last updated at Posted at 2024-06-15

はじめに

Flutter のプロジェクトベースのテンプレートを選定していて、hukusuke1007 / flutter_app_template がとても良さそうだったため、導入方法（git clone から flutter run まで）を確認してまとめます。

選定理由

選定した理由は以下です。

  • README が丁寧に書かれていて、テンプレートの導入方法がわかりやすい
  • 使い方や設計思想、参考文献のドキュメントがあり、勉強になる

hukusuke1007 / flutter_app_template について

リポジトリには参考文献として以下の記事リンクが貼ってあり、ディレクトリには FeatureFirst と LayerFirst の２種類のテンプレートが用意されています。

hukusuke1007/flutter_app_template では、FeatureFirst のほうが Flutter + Firebase アプリのスターターキットになっており機能が充実しているため、FeatureFirst を選択します。

今まで私は MVC モデルの構成に馴染んでいたため、LayerFirst のほうが現状はしっくりきそうですが、FeatureFirst だとどのような感じか今回利用することで慣れていきたいと思います。

テンプレートの導入方法は feature_firrst/README.md にあるので、そのとおりに進めてみます。

前提

  • 記事内の実行ログは macOS
  • Flutter の環境構築が完了していること

参考. Flutter の環境構築

目次

1. git clone
2. 作業用ディレクトリ内の.git を削除
3. アプリ名、パッケージ名、プロジェクト名の変更
4. 新しい Firebase プロジェクトの構築
5. Firebase コンソールでの匿名認証の有効化
6. Flutter のライブラリ取り込みとバージョン指定
7. flutter run
8. GitHub リポジトリの作成

1. git clone

git clone コマンドを実行して、ローカル環境に取り込みます。

# r_yamate @ mbp in ~/development/original [11:51:02]
$ git clone https://github.com/hukusuke1007/flutter_app_template.git
Cloning into 'flutter_app_template'...
remote: Enumerating objects: 7258, done.
remote: Counting objects: 100% (2107/2107), done.
remote: Compressing objects: 100% (946/946), done.
remote: Total 7258 (delta 1115), reused 2014 (delta 1056), pack-reused 5151
Receiving objects: 100% (7258/7258), 2.75 MiB | 6.34 MiB/s, done.
Resolving deltas: 100% (4538/4538), done.

作業用ディレクトリへコピーします。

# r_yamate @ mbp in ~/development/original [11:51:09]
$ cp -rf feature_first/ ~/development
cp: feature_first/: No such file or directory

作業用ディレクトリに移動します。

# r_yamate @ mbp in ~/development/original [11:51:09]
$ cd ~/development/feature_first/

2. 作業用ディレクトリ内の.git を削除

作業用ディレクトリ内の.gitを削除します。

# r_yamate @ mbp in ~/development/feature_first [11:52:05]
$ rm -rf .git

3. アプリ名、パッケージ名、プロジェクト名の変更

変更したいアプリ名、パッケージ名、プロジェクト名にします。

手動で修正するか、change_app_package_nameを使って自動で修正する。

とあり、change_app_package_name を使用したことがないため、折角なので利用して自動修正してみます。

3-0. change_app_package_name の導入

pubspec.yaml にパッケージを追加します。

dev_dependencies:
  change_app_package_name: ^1.2.0

依存関係を更新します。

flutter pub get
コマンド実行時ログ 
# r_yamate @ mbp in ~/development/feature_first [16:53:51] C:64
$ flutter pub get
Found an existing Pub cache at /Users/r_yamate/.pub-cache.
It can be repaired by running `dart pub cache repair`.
It can be reset by running `dart pub cache clean`.
Found an existing Dart Analysis Server cache at /Users/r_yamate/.dartServer.
It can be reset by deleting /Users/r_yamate/.dartServer.
Resolving dependencies... (2.4s)
  _fe_analyzer_shared 67.0.0 (70.0.0 available)
  _flutterfire_internals 1.3.25 (1.3.36 available)
  analyzer 6.4.1 (6.5.2 available)
  archive 3.4.10 (3.6.1 available)
  args 2.4.2 (2.5.0 available)
  build_daemon 4.0.1 (4.0.2 available)
  build_runner 2.4.8 (2.4.11 available)
  build_runner_core 7.3.0 (7.3.1 available)
  built_value 8.9.1 (8.9.2 available)
+ change_app_package_name 1.2.0
  cloud_firestore 4.15.8 (5.0.0 available)
  cloud_firestore_platform_interface 6.1.9 (6.2.6 available)
  cloud_firestore_web 3.10.8 (4.0.0 available)
  cloud_functions 4.6.8 (5.0.0 available)
  cloud_functions_platform_interface 5.5.19 (5.5.29 available)
  cloud_functions_web 4.7.2 (4.9.7 available)
  cross_file 0.3.3+8 (0.3.4+1 available)
  cupertino_icons 1.0.6 (1.0.8 available)
  custom_lint 0.6.2 (0.6.4 available)
  custom_lint_builder 0.6.2 (0.6.4 available)
  custom_lint_core 0.6.2 (0.6.3 available)
  device_info_plus 9.1.2 (10.1.0 available)
  dio 5.4.1 (5.4.3+1 available)
  extended_image 8.2.0 (8.2.1 available)
  extended_image_library 4.0.2 (4.0.4 available)
  file_selector_macos 0.9.3+3 (0.9.4 available)
  firebase_analytics 10.8.9 (11.0.0 available)
  firebase_analytics_platform_interface 3.9.9 (4.0.0 available)
  firebase_analytics_web 0.5.5+21 (0.5.7+8 available)
  firebase_auth 4.17.8 (5.0.0 available)
  firebase_auth_platform_interface 7.1.8 (7.3.1 available)
  firebase_auth_web 5.9.8 (5.12.1 available)
  firebase_core 2.27.0 (3.0.0 available)
  firebase_core_web 2.11.5 (2.17.1 available)
  firebase_crashlytics 3.4.18 (4.0.0 available)
  firebase_crashlytics_platform_interface 3.6.25 (3.6.36 available)
  firebase_messaging 14.7.19 (15.0.0 available)
  firebase_messaging_platform_interface 4.5.27 (4.5.38 available)
  firebase_messaging_web 3.6.8 (3.8.8 available)
  firebase_remote_config 4.3.17 (5.0.0 available)
  firebase_remote_config_platform_interface 1.4.25 (1.4.36 available)
  firebase_remote_config_web 1.4.25 (1.6.8 available)
  firebase_storage 11.6.9 (12.0.0 available)
  firebase_storage_platform_interface 5.1.12 (5.1.23 available)
  firebase_storage_web 3.7.3 (3.9.8 available)
  flutter_gen_core 5.4.0 (5.5.0+1 available)
  flutter_gen_runner 5.4.0 (5.5.0+1 available)
  flutter_image_compress 2.1.0 (2.3.0 available)
  flutter_image_compress_common 1.0.3 (1.0.5 available)
  flutter_image_compress_macos 1.0.1 (1.0.2 available)
  flutter_image_compress_platform_interface 1.0.3 (1.0.5 available)
  flutter_image_compress_web 0.1.3+2 (0.1.4+1 available)
  flutter_lints 3.0.1 (4.0.0 available)
  flutter_local_notifications 16.3.3 (17.1.2 available)
  flutter_local_notifications_platform_interface 7.0.0+1 (7.1.0 available)
  flutter_plugin_android_lifecycle 2.0.17 (2.0.20 available)
  flutter_riverpod 2.4.10 (2.5.1 available)
  flutter_slidable 3.0.1 (3.1.0 available)
  freezed 2.4.7 (2.5.3 available)
  frontend_server_client 3.2.0 (4.0.0 available)
  go_router 13.2.0 (14.1.4 available)
  gradient_borders 1.0.0 (1.0.1 available)
  hooks_riverpod 2.4.10 (2.5.1 available)
  http 1.2.0 (1.2.1 available)
  image 4.1.7 (4.2.0 available)
  image_cropper 5.0.1 (7.0.4 available)
  image_cropper_for_web 3.0.0 (5.0.3 available)
  image_cropper_platform_interface 5.0.0 (6.0.3 available)
  image_picker 1.0.7 (1.1.2 available)
  image_picker_android 0.8.9+3 (0.8.12+3 available)
  image_picker_for_web 3.0.2 (3.0.4 available)
  image_picker_ios 0.8.9+1 (0.8.12 available)
  image_picker_platform_interface 2.9.4 (2.10.0 available)
  intl 0.18.1 (0.19.0 available)
  js 0.6.7 (0.7.1 available)
  json_annotation 4.8.1 (4.9.0 available)
  json_serializable 6.7.1 (6.8.0 available)
  leak_tracker 10.0.0 (10.0.5 available)
  leak_tracker_flutter_testing 2.0.1 (3.0.5 available)
  leak_tracker_testing 2.0.1 (3.0.1 available)
  lints 3.0.0 (4.0.0 available)
  macos_ui 2.0.5 (2.0.7 available)
  map_launcher 3.2.0 (3.3.1 available)
  material_color_utilities 0.8.0 (0.12.0 available)
  meta 1.11.0 (1.15.0 available)
  package_info_plus 5.0.1 (8.0.0 available)
  package_info_plus_platform_interface 2.0.1 (3.0.0 available)
  path_provider 2.1.2 (2.1.3 available)
  path_provider_android 2.2.2 (2.2.5 available)
  path_provider_foundation 2.3.2 (2.4.0 available)
  pedantic_mono 1.26.0 (1.27.0 available)
  permission_handler 11.3.0 (11.3.1 available)
  permission_handler_android 12.0.5 (12.0.6 available)
  permission_handler_apple 9.4.0 (9.4.5 available)
  permission_handler_platform_interface 4.2.0 (4.2.1 available)
  pointycastle 3.7.4 (3.9.1 available)
  pubspec_parse 1.2.3 (1.3.0 available)
  riverpod 2.5.0 (2.5.1 available)
  riverpod_analyzer_utils 0.5.1 (0.5.3 available)
  riverpod_annotation 2.3.4 (2.3.5 available)
  riverpod_generator 2.3.11 (2.4.2 available)
  riverpod_lint 2.3.9 (2.3.12 available)
  share_plus 7.2.2 (9.0.0 available)
  share_plus_platform_interface 3.3.1 (4.0.0 available)
  shared_preferences 2.2.2 (2.2.3 available)
  shared_preferences_android 2.2.1 (2.2.3 available)
  shared_preferences_foundation 2.3.5 (2.4.0 available)
  shared_preferences_web 2.2.2 (2.3.0 available)
  shelf_web_socket 1.0.4 (2.0.0 available)
  test_api 0.6.1 (0.7.2 available)
  timezone 0.9.2 (0.9.3 available)
  url_launcher 6.2.5 (6.3.0 available)
  url_launcher_android 6.3.0 (6.3.3 available)
  url_launcher_ios 6.2.5 (6.3.0 available)
  url_launcher_macos 3.1.0 (3.2.0 available)
  url_launcher_web 2.2.3 (2.3.1 available)
  uuid 4.3.3 (4.4.0 available)
  vm_service 13.0.0 (14.2.3 available)
  web 0.4.2 (0.5.1 available)
  web_socket_channel 2.4.3 (3.0.0 available)
  win32 5.2.0 (5.5.1 available)
  win32_registry 1.1.2 (1.1.3 available)
Changed 1 dependency!
121 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

パッケージ名を変更するには、このコマンドを実行します。

flutter pub run change_app_package_name:main com.new.package.name

# r_yamate @ mbp in ~/development/feature_first [16:55:03]
$ flutter pub run change_app_package_name:main com.ryamate.yomikey
Deprecated. Use `dart run` instead.
Building package executable...
Built change_app_package_name:main.
Old Package Name: com.example.app
Updating build.gradle File
Updating Main Manifest file
Updating Debug Manifest file
Updating Profile Manifest file
Project is using kotlin
Updating MainActivity.kt
Creating New Directory Structure
Deleting old directories

自動修正が完了しました。

自動修正が適切にされているかを確認しながら、修正が済んでいない箇所は手入力で修正していきます。（まぁまぁ手入力が必要でした）

3-1. アプリ名の変更

アプリ名変更のコマンド実行で以下については、適切に変更されていました。

  • iOS
    • ios/Runner/Info.plist
      • CFBundleDisplayName（自動修正OK）
      • CFBundleName（自動修正OK）
  • Android
    • android/app/build.gradle
      • resValue（自動修正OK）

3-2. パッケージ名の変更

パッケージ名（com.example.app）の変更については、一部手入力で修正する必要がありました。

  • iOS

    • Xcode > Runner > TARGETS Runner > Build Settings の Product Bundle Identifier 変更については、自動修正されていなかったため、手入力で修正します。

      image.png

      • Debug, Profile, Release の全てを変更する
      • $(APP_ID_SUFFIX) はそのまま

  • Android

    • android/app/build.gradle

      • namespace（自動修正OK）
      • applicationId（自動修正OK）

    • android/app/src/main/AndroidManifest.xml

      • package（自動修正OK）

    • android/app/src/debug/AndroidManifest.xml

      • package（自動修正OK）

    • android/app/src/profile/AndroidManifest.xml

      • package（自動修正OK）

    • android/app/src/main/kotlin/com/ryamate/yomikey/MainActivity.kt

      • package（自動修正OK）

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

      • android/app/src/main/kotlin/com/ryamate/yomikey/MainActivity.kt

        • MainActivity.kt のディレクトリのみ自動修正されていました

      • android/app/src/main/kotlin/com/example/app/ScreenReaderPlugin.kt

        → android/app/src/main/kotlin/com/ryamate/yomikey/ScreenReaderPlugin.kt

    • android/app/src/main/kotlin/com/ryamate/yomikey/ScreenReaderPlugin.kt

      • package（手入力）

3-3. プロジェクト名の変更

プロジェクト名は手入力で変更します。

  • pubspec.yaml
    • name（手入力）

3-x. prefixName の変更

prefixNameも変更しておきます。

prefixName は、アプリケーション内で使用する一意の名前空間を定義するためのプレフィックス（接頭辞）です。

  • Flutter
    • lib/features/home/repositories/screen_reader_repository.dart
      • prefixName（手入力）
  • ios/Runner/ScreenReaderPlugin.swift
    • screenReader（手入力。２ヶ所）
  • android
    • android/app/src/main/kotlin/com/ryamate/yomikey/ScreenReaderPlugin.kt
      • SCREEN_READER（手入力）
      • SCREEN_READER_FETCH_ENABLE（手入力）

4. 新しい Firebase プロジェクトの構築

新しい Firebase プロジェクトを構築します。

本番環境と開発環境の 2 種類用意します。

なお、開発環境のパッケージ名の末尾は必ず .dev を付与する。

とあるので、そのようにします。

4-1. Firebase プロジェクトを作成

プロジェクト作成をクリックします。まずは本番環境の Firebase プロジェクトを作成します。

image.png

プロジェクトに名前を付けます。

image.png

私は絵本読み聞かせアプリを作成するため、本番環境には「Picture Book Log」と名前を付けておきます。（開発環境には「Picture Book Log Develop」と付けます）

ポチポチするだけなので、以降はスクショだけ貼っておきます。

image.png

image.png

image.png

image.png

プロジェクトが作成されました！

4-2. Flutter アプリに Firebase を追加する

4-2-1. ワークスペースの準備

続いて（Firebase CLI をインストールして、）firebase login でログインします。

image.png

# r_yamate @ mbp in ~/development/feature_first [14:49:22]
$ firebase login
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting
information? Yes
i  To change your data collection preference at any time, run `firebase logout` and log in again.

Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqneki~~~~~~~~~~~

Waiting for authentication...

✔  Success! Logged in as ~~~~~~~~~~~@gmail.com

   ╭───────────────────────────────────────────────────────────────────╮
   │                                                                   │
   │                 Update available 12.8.1 → 13.11.2                 │
   │          To update to the latest version using npm, run           │
   │                   npm install -g firebase-tools                   │
   │   For other CLI management options, visit the CLI documentation   │
   │                                                                   │
   │                                                                   │
   │                                                                   │
   ╰───────────────────────────────────────────────────────────────────╯

（まだしていなければ、Flutter SDK をインストールします）

4-2-2. FlutterFire CLI のインストールと実行

image.png

dart コマンドを使用して flutterfire_cli パッケージをグローバルにインストールします。

dart pub global activate flutterfire_cli


# r_yamate @ mbp in ~/development/feature_first [14:50:08]
$ dart pub global activate flutterfire_cli
No preset version installed for command dart
Please install a version by running one of the following:

asdf install flutter 3.19.2-stable

or add one of the following versions in your config file at /Users/r_yamate/development/feature_first/.tool-versions
flutter 3.19.5-stable
flutter 3.19.6-stable
flutter 3.3.10-stable
flutter 3.7.0-stable
flutter 3.7.1-stable
flutter 3.7.9-stable

Dart SDK の適切なバージョンが見つからない旨のエラーメッセージが表示されました。

テンプレートは Flutter のバージョン管理ツールについては、FVM と asdf を利用できるようにしてくれています。

私は asdf を使用しているため、とりあえず asdf を使って適切なバージョンの Dart SDK をインストールします。

asdf install

# r_yamate @ mbp in ~/development/feature_first [15:01:44]
$ asdf install
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 1110M  100 1110M    0     0  24.8M      0  0:00:44  0:00:44 --:--:-- 24.4M

# r_yamate @ mbp in ~/development/feature_first [15:33:47] C:1
$ flutter --version

┌─────────────────────────────────────────────────────────┐
│ A new version of Flutter is available!                  │
│                                                         │
│ To update to the latest version, run "flutter upgrade". │
└─────────────────────────────────────────────────────────┘
Flutter 3.19.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7482962148 (3 months ago) • 2024-02-27 16:51:22 -0500
Engine • revision 04817c99c9
Tools • Dart 3.3.0 • DevTools 2.31.1

再度 flutterfire_cli パッケージをインストールします。

# r_yamate @ mbp in ~/development/feature_first [15:25:02]
$ dart pub global activate flutterfire_cli
Package flutterfire_cli is currently active at version 1.0.0.
The package flutterfire_cli is already activated at newest available version.
To recompile executables, first run `dart pub global deactivate flutterfire_cli`.
Installed executable flutterfire.
Activated flutterfire_cli 1.0.0.

私の環境では既にインストールされていました…

4-2-3. Firebase の設定ファイルの作成

（引き続き Firebase コンソールの指示通り、）Flutter プロジェクト ディレクトリのルートで次のコマンドを実行します。

flutterfire configure --project=picture-book-log

途中に聞かれる Which ios bundle id do you want to use for this configuration, e.g. 'com.example.app'? はパッケージ名（私の場合、本番環境は com.ryamate.yomikey、開発環境はcom.ryamate.yomikey.dev）を入力します。

4-2-4. Firebase の設定ファイルの配置（本番環境）

本番環境に構築した Firebase の設定ファイルを以下の場所へ設置します。

  • android/app/src/prod/google-services.json
  • ios/prod/GoogleService-Info.plist

4-2-5. Firebase の設定ファイルの配置（開発環境）

「4-1. Firebase プロジェクトを作成」から「4-2. Flutter アプリに Firebase を追加する」の「4-2-4. Firebase の設定ファイルの配置（本番環境）」と同様に開発環境についてもFirebase の設定ファイルを以下の場所へ配置します。

  • android/app/src/dev/google-services.json
  • ios/dev/GoogleService-Info.plist

5. Firebase コンソールでの匿名認証の有効化

Firebase コンソールから本番環境と開発環境の「匿名認証」を有効化します。

具体的には、左側のナビゲーションメニューから「Authentication」選択 → 「ログイン方法」タブ → 「匿名」を押します。

image.png

有効にして、「保存」を押します。

image.png

6. Flutter のライブラリ取り込みとバージョン指定

pub get を実行します。

flutter pub get
コマンド実行時ログ 
# r_yamate @ mbp in ~/development/feature_first [22:44:59] C:1
$ flutter pub get
Resolving dependencies... (2.3s)
  _fe_analyzer_shared 67.0.0 (70.0.0 available)
  _flutterfire_internals 1.3.25 (1.3.36 available)
  analyzer 6.4.1 (6.5.2 available)
  archive 3.4.10 (3.6.1 available)
  args 2.4.2 (2.5.0 available)
  build_daemon 4.0.1 (4.0.2 available)
  build_runner 2.4.8 (2.4.11 available)
  build_runner_core 7.3.0 (7.3.1 available)
  built_value 8.9.1 (8.9.2 available)
  cloud_firestore 4.15.8 (5.0.0 available)
  cloud_firestore_platform_interface 6.1.9 (6.2.6 available)
  cloud_firestore_web 3.10.8 (4.0.0 available)
  cloud_functions 4.6.8 (5.0.0 available)
  cloud_functions_platform_interface 5.5.19 (5.5.29 available)
  cloud_functions_web 4.7.2 (4.9.7 available)
  cross_file 0.3.3+8 (0.3.4+1 available)
  cupertino_icons 1.0.6 (1.0.8 available)
  custom_lint 0.6.2 (0.6.4 available)
  custom_lint_builder 0.6.2 (0.6.4 available)
  custom_lint_core 0.6.2 (0.6.3 available)
  device_info_plus 9.1.2 (10.1.0 available)
  dio 5.4.1 (5.4.3+1 available)
  extended_image 8.2.0 (8.2.1 available)
  extended_image_library 4.0.2 (4.0.4 available)
  file_selector_macos 0.9.3+3 (0.9.4 available)
  firebase_analytics 10.8.9 (11.0.0 available)
  firebase_analytics_platform_interface 3.9.9 (4.0.0 available)
  firebase_analytics_web 0.5.5+21 (0.5.7+8 available)
  firebase_auth 4.17.8 (5.0.0 available)
  firebase_auth_platform_interface 7.1.8 (7.3.1 available)
  firebase_auth_web 5.9.8 (5.12.1 available)
  firebase_core 2.27.0 (3.0.0 available)
  firebase_core_web 2.11.5 (2.17.1 available)
  firebase_crashlytics 3.4.18 (4.0.0 available)
  firebase_crashlytics_platform_interface 3.6.25 (3.6.36 available)
  firebase_messaging 14.7.19 (15.0.0 available)
  firebase_messaging_platform_interface 4.5.27 (4.5.38 available)
  firebase_messaging_web 3.6.8 (3.8.8 available)
  firebase_remote_config 4.3.17 (5.0.0 available)
  firebase_remote_config_platform_interface 1.4.25 (1.4.36 available)
  firebase_remote_config_web 1.4.25 (1.6.8 available)
  firebase_storage 11.6.9 (12.0.0 available)
  firebase_storage_platform_interface 5.1.12 (5.1.23 available)
  firebase_storage_web 3.7.3 (3.9.8 available)
  flutter_gen_core 5.4.0 (5.5.0+1 available)
  flutter_gen_runner 5.4.0 (5.5.0+1 available)
  flutter_image_compress 2.1.0 (2.3.0 available)
  flutter_image_compress_common 1.0.3 (1.0.5 available)
  flutter_image_compress_macos 1.0.1 (1.0.2 available)
  flutter_image_compress_platform_interface 1.0.3 (1.0.5 available)
  flutter_image_compress_web 0.1.3+2 (0.1.4+1 available)
  flutter_lints 3.0.1 (4.0.0 available)
  flutter_local_notifications 16.3.3 (17.1.2 available)
  flutter_local_notifications_platform_interface 7.0.0+1 (7.1.0 available)
  flutter_plugin_android_lifecycle 2.0.17 (2.0.20 available)
  flutter_riverpod 2.4.10 (2.5.1 available)
  flutter_slidable 3.0.1 (3.1.0 available)
  freezed 2.4.7 (2.5.3 available)
  frontend_server_client 3.2.0 (4.0.0 available)
  go_router 13.2.0 (14.1.4 available)
  gradient_borders 1.0.0 (1.0.1 available)
  hooks_riverpod 2.4.10 (2.5.1 available)
  http 1.2.0 (1.2.1 available)
  image 4.1.7 (4.2.0 available)
  image_cropper 5.0.1 (7.0.4 available)
  image_cropper_for_web 3.0.0 (5.0.3 available)
  image_cropper_platform_interface 5.0.0 (6.0.3 available)
  image_picker 1.0.7 (1.1.2 available)
  image_picker_android 0.8.9+3 (0.8.12+3 available)
  image_picker_for_web 3.0.2 (3.0.4 available)
  image_picker_ios 0.8.9+1 (0.8.12 available)
  image_picker_platform_interface 2.9.4 (2.10.0 available)
  intl 0.18.1 (0.19.0 available)
  js 0.6.7 (0.7.1 available)
  json_annotation 4.8.1 (4.9.0 available)
  json_serializable 6.7.1 (6.8.0 available)
  leak_tracker 10.0.0 (10.0.5 available)
  leak_tracker_flutter_testing 2.0.1 (3.0.5 available)
  leak_tracker_testing 2.0.1 (3.0.1 available)
  lints 3.0.0 (4.0.0 available)
  macos_ui 2.0.5 (2.0.7 available)
  map_launcher 3.2.0 (3.3.1 available)
  material_color_utilities 0.8.0 (0.12.0 available)
  meta 1.11.0 (1.15.0 available)
  package_info_plus 5.0.1 (8.0.0 available)
  package_info_plus_platform_interface 2.0.1 (3.0.0 available)
  path_provider 2.1.2 (2.1.3 available)
  path_provider_android 2.2.2 (2.2.5 available)
  path_provider_foundation 2.3.2 (2.4.0 available)
  pedantic_mono 1.26.0 (1.27.0 available)
  permission_handler 11.3.0 (11.3.1 available)
  permission_handler_android 12.0.5 (12.0.6 available)
  permission_handler_apple 9.4.0 (9.4.5 available)
  permission_handler_platform_interface 4.2.0 (4.2.1 available)
  pointycastle 3.7.4 (3.9.1 available)
  pubspec_parse 1.2.3 (1.3.0 available)
  riverpod 2.5.0 (2.5.1 available)
  riverpod_analyzer_utils 0.5.1 (0.5.3 available)
  riverpod_annotation 2.3.4 (2.3.5 available)
  riverpod_generator 2.3.11 (2.4.2 available)
  riverpod_lint 2.3.9 (2.3.12 available)
  share_plus 7.2.2 (9.0.0 available)
  share_plus_platform_interface 3.3.1 (4.0.0 available)
  shared_preferences 2.2.2 (2.2.3 available)
  shared_preferences_android 2.2.1 (2.2.3 available)
  shared_preferences_foundation 2.3.5 (2.4.0 available)
  shared_preferences_web 2.2.2 (2.3.0 available)
  shelf_web_socket 1.0.4 (2.0.0 available)
  test_api 0.6.1 (0.7.2 available)
  timezone 0.9.2 (0.9.3 available)
  url_launcher 6.2.5 (6.3.0 available)
  url_launcher_android 6.3.0 (6.3.3 available)
  url_launcher_ios 6.2.5 (6.3.0 available)
  url_launcher_macos 3.1.0 (3.2.0 available)
  url_launcher_web 2.2.3 (2.3.1 available)
  uuid 4.3.3 (4.4.0 available)
  vm_service 13.0.0 (14.2.3 available)
  web 0.4.2 (0.5.1 available)
  web_socket_channel 2.4.3 (3.0.0 available)
  win32 5.2.0 (5.5.1 available)
  win32_registry 1.1.2 (1.1.3 available)
Got dependencies!
121 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

利用するバージョンを固定にするため、pubspec.lock 内のプラグインのバージョンを見て pubspec.yaml のプラグインのバージョンを指定します。

編集前
...

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  cupertino_icons: ^1.0.2

  # Logger
  simple_logger:

  # LocalDatabase
  shared_preferences:

  # Riverpod
  hooks_riverpod:
  riverpod_annotation:

...
編集後
...

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  cupertino_icons: ^1.0.2

  # Logger
  simple_logger: 1.9.0+3

  # LocalDatabase
  shared_preferences: 2.2.2

  # Riverpod
  hooks_riverpod: 2.4.10
  riverpod_annotation: 2.3.4

...

7. flutter run

flutter run コマンドでアプリを実行して、開発環境の動作確認します。

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

続いて、本番環境の動作確認します。

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

8. GitHub リポジトリの作成

ここまで問題なかったため、GitHub リポジトリを作成します。

8-1. ディレクトリ名の変更

# r_yamate @ mbp in ~/development/feature_first [0:02:04]
$ cd ..

# r_yamate @ mbp in ~/development [0:48:28]
$ mv feature_first picture_book_log

8-2. .git ディレクトリの作成

.git ディレクトリを作成します。

# r_yamate @ mbp in ~/development [0:48:47]
$ cd picture_book_log

# r_yamate @ mbp in ~/development/picture_book_log [0:49:21]
$ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: 	git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: 	git branch -m <name>
Initialized empty Git repository in /Users/r_yamate/development/picture_book_log/.git/

8-3. コミット

コミットします。

# r_yamate @ mbp in ~/development/picture_book_log on git:master x [0:54:29]
$ git add .

# r_yamate @ mbp in ~/development/picture_book_log on git:master x [0:56:02]
$ git commit -m "Initial commit"
[master (root-commit) 68c190f] Initial commit
 367 files changed, 24946 insertions(+)
 create mode 100644 .fvm/fvm_config.json
 create mode 100644 .gitattributes
 create mode 100644 .gitignore
...

8-4. GitHub でのリポジトリの作成

GitHub でリポジトリを作成します。

image.png

image.png

…or push an existing repository from the command line の以下の内容を実行します。

git remote add origin https://github.com/ryamate/picture_book_log.git
git branch -M main
git push -u origin main

# r_yamate @ mbp in ~/development/picture_book_log on git:master o [1:05:32] C:1
$ git remote add origin https://github.com/ryamate/picture_book_log.git
git branch -M main
git push -u origin main
Enumerating objects: 513, done.
Counting objects: 100% (513/513), done.
Delta compression using up to 8 threads
Compressing objects: 100% (472/472), done.
Writing objects: 100% (513/513), 837.47 KiB | 2.54 MiB/s, done.
Total 513 (delta 91), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (91/91), done.
To https://github.com/ryamate/picture_book_log.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

image.png

おわりに

Flutter + Firebase アプリのスターターキット hukusuke1007 / flutter_app_template の導入方法を確認してまとめました。

今後以下をやっていこうと思います。

  • タイムライン機能を確認するために、Cloud Firestore のpostsコレクションの index を設定する必要があるそうなので、今後やっていきます
  • Mason を使った Feature ディレクトリの作成など、README に書いてある開発方法の確認をします
  • Flutter パッケージの内容の確認をします。使わないプラグインやコードがあるかもしれませんが、不要と分かった段階で削除しながら、開発を進めていこうと思います
  • 参考文献を一部しか読めていないので、通読します

ありがとうございました。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
1