【Flutter × Firebase】連携手順

FlutterプロジェクトとFirebaseを連携する手順をまとめました。

従来の連携手順が公開されていたサイトにアクセスしたところ以下のように最新のドキュメントを見ろと言われ、手順が変わったようなので、最近の連携手順をまとめることにしました!

NOTICE

This page is archived and might not reflect the latest version of the FlutterFire plugins. You can find the latest information on firebase.google.com:

https://firebase.google.com/docs/flutter/setup

前提

  • Firebaseのサービス自体には登録済み
  • Flutterプロジェクト作成済み
  • 環境:macOS Monterey
  • node v16.10.0

1. Firebaseでプロジェクトを作成する

以下リンクのFirebaseにアクセスし、「プロジェクトを追加」より、新しいプロジェクトを作成する。

Sign in - Google Accounts

本記事では、FirebaseでのAndroidアプリ、iOSアプリの作成の手順についての説明は省略します。

2. Firebase CLIをインストール

以下の公式ドキュメントに倣って、ターミナルを開きコマンドを実行していきます。

Firebase CLI リファレンス  |  Firebase ドキュメント

ここでは、npmを使ったインストールを行います。

% npm install -g firebase-tools

3. Firebaseにログイン

以下コマンドにて、ローカルマシンとFirebaseに接続し、Firebaseプロジェクトへのアクセスを許可します。

% firebase login

使用するアカウントが表示されることを確認します。

もし異なる場合は一度、以下コマンドにてログアウトをしてからログインします。

% firebase logout

4. FlutterFire CLIをインストール

以下の公式ドキュメントに倣い進めます。

Add Firebase to your Flutter app

以下コマンドを実行します。

% dart pub global activate flutterfire_cli

おそらく以下の結果が返ってきます。

Package flutterfire_cli is currently active at version 0.2.6.
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.
Warning: Pub installs executables into $HOME/.pub-cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file (.bashrc, .bash_profile, etc.):

  export PATH="$PATH":"$HOME/.pub-cache/bin"

Activated flutterfire_cli 0.2.6.

何か追記しろと言われているので追記してあげましょう!

Zshを使用している場合とbashを使用している場合では、記述ファイルが異なりますので、どちらを使用しているかは以下コマンドにより確認します。macユーザーでしたらおそらくZshかと。

% echo $SHELL
/bin/zsh

このように表示されればZshです。

ですので、Zshのファイルにpathを通していきます。

% vi ~/.zshrc

「i」でinsertモードにし、一番最後の行に以下を記述します。

export PATH="$PATH":"$HOME/.pub-cache/bin"

「esc」→「:wq」で保存します。

一度ターミナルを閉じます。←これ忘れがち

再度ターミナルを開き実行すると、以下のように表示されインストールが完了しました。

% dart pub global activate flutterfire_cli
Package flutterfire_cli is currently active at version 0.2.6.
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 0.2.6.

5. Firebaseとプロジェクトの接続

プロジェクトのディレクトリで、次のコマンドを実行します。

% flutterfire configure

すると、Firebaseで作成したプロジェクトの一覧が表示されるのでプロジェクトを選択します。

その後に、platformを選択します。ここではAndroidとiOSを選択します。

i Found 1 Firebase projects.                                                                                                                                                                                                    
✔ Select a Firebase project to configure your Flutter application with · プロジェクト名                                                                                                                        
✔ Which platforms should your configuration support (use arrow keys & space to select)? · android, ios     

これで接続ができました。

6. Firebaseの初期設定をする

firebase_coreプラグインを追加します。

% flutter pub add firebase_core

プラグインの追加をしたので改めて、firebase configureを実行します。

% flutterfire configure

これによりFlutterアプリのFirebase構成を最新にします。

lib/main.dartファイルの、デフォルトで以下の記述となっている部分に変更を加えます。

void main() {
  runApp(const MyApp());
}

以下のように変更します。

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

これでビルドを行い、エラーがでなければ完了です!!

番外:エラーがでたら

Androidエミュレーターでのエラー

上記手順で行った際に、Androidエミュレーターでのデバッグ時に発生した以下エラーについて解消法を紹介します。

/Users/ディレクトリ/android/app/src/debug/AndroidManifest.xml Error:
	uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library [com.google.firebase:firebase-analytics-ktx:21.2.0] 
 /Users/ユーザー名/.gradle/caches/transforms-3/77fcfc1a5ffca8d94a6c1536b3786a34/transformed/jetified-firebase-analytics-ktx-21.2.0/AndroidManifest.xml as the library might be using APIs not available in 16
	Suggestion: use a compatible library with a minSdk of at most 16,
		or increase this project's minSdk version to at least 19,
		or use tools:overrideLibrary="com.google.firebase.analytics.ktx" to force usage (may lead to runtime failures)

minSdkVersionは16なのに、19のライブラリを使おうとしているからバージョンを合わせてくれ〜といっています。

解消法としては、minSdkVersionを直接指定してあげます。

最新のsdkVersion(APIレベル)は以下のサイトより確認することができ、2022年10月時点で最新のsdkVersion(APIレベル)は33です。

 |  Android Developers
API レベルを示す整数を使用して、アプリが Android プラットフォームの 1 つ以上のバージョンと互換性を持つことを明示できます。アプリよって明示された API レベルは、異なる特定の Android システムの API レベルと比較され…

今回は、最新より10個古い、23をminSdkVersionの固定値として設定してあげましょう!

19より大きい数字であれば大丈夫です。

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.flutter_sns"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
        minSdkVersion flutter.minSdkVersion

これでターミナルの再起動等を行い、再度デバッグを行うと、エラーが解消されていると思います。

iOSシミュレーターでのエラー

以下のエラーが発生しました。

error: Unexpected duplicate tasks
note: Target 'Runner' (project 'Runner') has copy command from '/Users/ディレクトリ名/ios/Runner/GoogleService-Info.plist' 
to '/Users/ディレクトリ名/build/ios/Debug-iphonesimulator/Runner.app/GoogleService-Info.plist'

「GoogleService-Info.plist」ファイルをコピーするときに何かミスをしてしまったようです。。

確かに身に覚えはあります。

一回Runner入れた際に入らなかったので入れ直したつもりが、違うところに入れており重複していたようです。

解消法

以下のファイルをDクリックすると、Xcodeが立ち上がります。

プロジェクトフォルダ > ios > Runner.xcworkspace

「GoogleService-Info.plist」を全て削除します。

そして「GoogleService-Info.plist」ファイルを入れ直します。

この画面では、「Copy items if need」にチェックを付けます。

その他

よくわからないエラーのときは、以下の対処法をまずやってみるのが良いです。

  • ターミナルの再起動
  • flutter clean コマンド実行(過去のビルドの内容を消去する)
  • PCの再起動

7. 認証を追加する

coreをインストールしたときと同様にauthをインストールすることで認証の追加ができます。

Get Started with Firebase Authentication on Flutter  |  Firebase Documentation

こちらの通り、以下コマンドを実行します。

% flutter pub add firebase_auth

すると、pubspec.yamlに追加されることを確認できます。

以上、お読みいただきありがとうございました。

コメント