今回は、FlutterアプリでFireBase が使えるように、手順をご紹介します。
基本的には、公式の以下手順をもとに進めています。
<公式>Flutter アプリに Firebase を追加する
ただ私の場合、躓いたことも多かったのでその対処方法も含めご紹介します。
環境
私の環境は以下です。
- Windows11
- VSCode
- Flutter 3.22.3
- Google Pixel [Android]（デバッグ用スマホ）
準備するもの
この手順を実施するためには、以下が必要です。
- 今回接続するFlutterアプリのプロジェクト
- FireBase のプロジェクトを管理するGoogleアカウント
- 以下公式に記載の前提条件
<公式>Flutter アプリに Firebase を追加する
この時点で、新たにFireBase のプロジェクトを準備しておく必要はありません。
既にプロジェクトを作成されている場合は、それを使うこともできます。
Firebase CLI のインストール
Firebase CLI とは、Firebaseに接続するためのCLI（Command Line Interface）です。
FireBase にアクセスするためには、Firebase CLI が必要です。
以下公式の手順を参考にインストールしてください。
<公式>Firebase CLI リファレンス
私はVSCodeのターミナルで実行したかったので、npmでのインストールを行いました。
参考にnpmでのインストール手順をご紹介します。
Node.jsのインストール
既にインストール済みであれば省略してください。
以下からNode.jsのインストーラーをダウンロードし、Node.jsをインストールしてください。
https://nodejs.org/en
Firebase CLI のインストール
以下コマンドをターミナルで実行してください。
npm install -g firebase-toolsこれで、Firebase CLI の準備は完了です。
FireBase へのログイン
ターミナルで以下コマンドを実行し、FireBase にログインします。
firebase login以下の様に、Googleのアカウント画面が開くので、管理するアカウントを選択してください。
FlutterFire CLI のインストール
FlutterFire CLIとは、FlutterアプリをFirebaseに接続するためのFlutter プラグインのセットです。
ターミナルで以下コマンドを実行し、FireBase にログインします。
dart pub global activate flutterfire_cliFlutterアプリのFirebase接続設定
ターミナルで以下コマンドを実行し、FireBase接続設定を行います。
flutterfire configureエラー：flutterfire: command not found
上記コマンドを実行すると、「flutterfire: command not found（’flutterfire’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。）」と
エラーが発生する場合があります。
システム環境変数を設定することで、このエラーを対処できます。
システム環境変数のPathに以下を追加してください。
C:\Users\{UserName}\AppData\Local\Pub\Cache\binエラー：FirebaseCommandException
上記を対応すると、新たに「FirebaseCommandException: An error occured on the Firebase CLI when attempting to run COMMAND: firebase projects:list –json」というエラーが発生する場合があります。
こちらはログインが上手くいっていないため、
ターミナルで以下コマンドを実行し、再度ログインしてください。
firebase login --reauthプロジェクトの選択
「flutterfire configure」を実行すると、以下のようにどのプロジェクト選択するか聞かれるため、
既存のプロジェクトを選ぶか「create a new project」を選択して新たなプロジェクトを作成します。
プロジェクト選択後、プラットフォームを選択すると、
FireBaseに接続するための設定がFlutterアプリプロジェクトに反映されます。
firebase_coreのインストール
pubspec.yamlにfirebase_coreを追加します。（バージョンは任意）
dependencies:
firebase_core: ^3.2.0main.dartの設定
main.dartにFireBaseと接続するための、初期処理を記述します。
Future<void> main() async {
// firebase
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);実行してみるとエラーが発生…
私の場合、上記設定後にデバックモードで実行してみたところ以下のエラーが発生しました。
「com.google.gms:google-services」のクラスパスが見つからないというエラーです。
Could not find method classpath() for arguments [com.google.gms:google-services:4.3.15]
on root project 'android' of type org.gradle.api.Project.対処方法
以下３ファイルを修正します。
- android\build.gradle
- android\settings.gradle
- android\app\build.gradle
android\build.gradle
「buildscript」の部分を削除します。
- buildscript {
- ext.kotlin_version = '1.7.10'
- repositories {
- google()
- mavenCentral()
- }
- dependencies {
- // START: FlutterFire Configuration
- classpath 'com.google.gms:google-services:4.3.15'
- // END: FlutterFire Configuration
- classpath 'com.android.tools.build:gradle:7.3.0'
- classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
- }
- }
allprojects {
repositories {
google()
mavenCentral()
}
}
android\settings.gradle
「plugins」に以下の通り「com.google.gms.google-services」を追加します。（バージョンは任意）
plugins {
id "dev.flutter.flutter-plugin-loader" version '1.0.0'
id "com.android.application" version '7.3.0' apply false
id "org.jetbrains.kotlin.android" version '1.7.10' apply false
+ id "com.google.gms.google-services" version '4.3.15' apply false
}android\app\build.gradle
以下の通り、”flutterfire configure”のコマンド実行時に、自動で追加された
「apply plugin: ‘com.google.gms.google-services’」を削除し、
以下の通り「id “com.google.gms.google-services”」を追加します。
plugins {
id "com.android.application"
- // START: FlutterFire Configuration\
- apply plugin: 'com.google.gms.google-services'
+ id "com.google.gms.google-services"
- // END: FlutterFire Configuration
id "org.jetbrains.kotlin.android"
id "dev.flutter.flutter-gradle-plugin"
}まだまだエラーがでる…
再度デバッグ実行すると、今度は以下のメッセージが表示されました。
どうやらminSdkVersionのバージョンがだめ見たいです。
│ android { │
│ defaultConfig { │
│ minSdkVersion 23 │
│ } │
│ } │
│ │
│ Following this change, your app will not be available to users running Android SDKs below 23. │
│ Consider searching for a version of this plugin that supports these lower versions of the │
│ Android SDK instead. │
│ For more information, see: │
│ https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration │
└───────────────────────────────────────────────────────────────────────────────────────────────┘
Error: Gradle task assembleDebug failed with exit code 1対策方法１
android\build.gradleに以下記載があるため、以下のように修正します。
defaultConfig {
- minSdkVersion flutter.minSdkVersion
+ minSdkVersion 23
}対策方法２
もしくは、Flutter JDKの以下ファイルに記載のminSdkVersionのデフォルト値を変更します。
“…\flutter\packages\flutter_tools\gradle\src\main\groovy\flutter.groovy”
class FlutterExtension {
/** Sets the compileSdkVersion used by default in Flutter app projects. */
public final int compileSdkVersion = 34
/** Sets the minSdkVersion used by default in Flutter app projects. */
- public final int minSdkVersion = 19
+ public final int minSdkVersion = 23
今後作成するアプリもFireBaseへアクセスする可能性があったため、
私はこちらの方法で対応しました。
デバッグができることを確認！
再々度、デバッグ実行を行ってみると、無事実行できました！
Launching lib\main.dart on Pixel X in debug mode...
Picked up JAVA_TOOL_OPTIONS: -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8
√ Built build\app\outputs\flutter-apk\app-debug.apk
Connecting to VM Service at ws://127.0.0.x:xxxx/vv-oYScA6OI=/ws