【M1 Mac】FlutterアプリにFirebaseを導入|iOS/Androidのセットアップ

今回はM1 Mac(Appleシリコン)でFlutterのアプリ開発をしている方向けにFirebaseの導入方法を紹介します。

iOS、Androidアプリの順でFirebaseの導入方法を解説していきます。

目次

iOS/Androidでの共通準備

まずは「Firebase Console」で新規プロジェクトを作成します。

M1 Mac版:iOSアプリにFirebaseを導入

作成したFirebaseプロジェクトの管理画面を開いたら「iOSアイコン」をクリックし、Flutterで開発しているiOSアプリに Firebaseを追加していきます。

ステップ1:アプリの登録

「AppleバンドルID(Bundle Identifier)」はFirebaseを導入するFlutterプロジェクトから取得します。「アプリのニックネーム」は管理者のみに表示されます(ユーザーには表示されない)。

AppleバンドルIDを取得するにはまずiosをXcodeで開きます。

Xcodeを開いたらRunner > Generalから「AppleバンドルID(Bundle Identifier)」を取得できます。Xcodeはこの後も使用するので閉じなくて大丈夫です。

ステップ2:設定ファイルのダウンロード

「設定ファイルのダウンロード」からGoogleService-info.plistをダウンロードし、Xcodeで指定された場所に移動させます。

RunnerGoogleService-info.plistをドラッグ&ドロップします。(2つあるので間違えないよう注意)

ドラッグ&ドロップする際にGoogleService-info.plistを追加して良いか聞かれるので「Destination」と「Add to targets」のRunnerにチェックが入っているのを確認し認証します。

ステップ3:Firebase SDKの追加

Flutterで開発しているiOSアプリにFirebaseを導入する場合「Firebase SDKの追加」をする必要はありません(Androidアプリの場合は必要)。

何もせず「次へ」をクリックしていきます。

ステップ4:初期化コードの追加

このステップも無視して「次へ」をクリック。

iOSアプリにFirebaseが追加できたか確認

これでiOSアプリにFirebaseを追加する全てのステップは完了です。「コンソールに進む」をクリックすればプロジェクトの管理画面に戻ります。

一度、iOSアプリを再起動してエラーが発生しないか確認しましょう。エラーが発生した場合は間違えがないか再度確認してみてください。

Firebaseパッケージの導入

Firebaseの追加が完了したらFirebaseパッケージをFlutterプロジェクトに導入します。

今回はFirebaseを使用するのに必須なfirebase_coreパッケージのみダウンロードしていきます。(Firebase AuthとFirestoreも一緒に導入しておくのがオススメ)

$ flutter pub add firebase_core
import 'package:firebase_core/firebase_core.dart';

main関数でFirebase.initializeApp()を呼び出す

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

...

firebase_coreを導入したら上記コードのようにmain()Firebase.initializeApp()を呼び出します。FlutterでFirebaseを使用するのに必要なおまじないだと思っておきましょう。

CocoaPodsのインストール

iosにあるPodfileを開き、#platform :ios, '9.0'のコメントアウトを外したらiOSバージョンを「10.0」に上げます。

Finderを開き「アプリケーション」>「ユーティリティ」>「ターミナル」でターミナルを右クリックし「情報を見る」を選択。「Rosettaを使用して開く」にチェックを入れ、ターミナルを起動します。

① sudo arch -x86_64 gem install ffi
② arch -x86_64 pod install --repo-update

ターミナルで①コマンドを実行した後、$ cd iosでFlutterプロジェクトのiosに移動し、②コマンドを実行しCocoaPodsをインストールします。

これでiOSアプリへのFirebase導入は完了です。

M1 Mac版:AndroidアプリにFirebaseを導入

作成したFirebaseプロジェクトの管理画面を開いたら「Androidアイコン」をクリックし、Flutterで開発しているAndroidアプリにFirebaseを追加していきます。

ステップ1:アプリの登録

「Android パッケージ名」はFirebaseを導入するFlutterプロジェクトから取得します。「アプリのニックネーム」は管理者のみに表示されます(ユーザーには表示されない)。

「applicationId」はFlutterプロジェクトの./android/app/build.gradledefaultConfigで取得できます。

ステップ2:設定ファイルのダウンロード

「設定ファイルのダウンロード」でダウンロードしたgoogle-services.jsonをFlutterプロジェクトに追加します。

google-services.json./android/appappに移動させます。

ステップ3:Firebase SDKの追加

「Firebase SDKの追加」ではプロジェクトレベルとアプリレベルの2つのbuild.gradleに「Add this line」と指定されたコードを追加します。

画像のコードとバージョンが異なっていても問題ありません。現在Firebaseで指示されているバージョンを使用してください。

プロジェクトレベルのbuild.gradleを開いたら「Add this line」で指定されたコードを指定場所にコピペします。(インデントを正しく揃える)

アプリレベルのbuild.gradleを開いたら「Add this line」で指定されたコードを指定場所にコピペします。(インデントを正しく揃える)

プロジェクトレベルとアプリレベル両方でbuild.gradleを更新したら「次へ」をクリック。

AndroidアプリにFirebaseが追加できたか確認

これでAndroidアプリにFirebaseを追加する全てのステップは完了です。「コンソールに進む」をクリックすればプロジェクトの管理画面に戻ります。

一度、Androidアプリを再起動してエラーが発生しないか確認しましょう。エラーが発生した場合は間違えがないか再度確認してみてください。

Firebaseパッケージの導入

Firebaseの追加が完了したらFirebaseパッケージをFlutterプロジェクトに導入します。

今回はFirebaseを使用するのに必須なfirebase_coreパッケージのみダウンロードしていきます。(Firebase AuthとFirestoreも一緒に導入しておくのがオススメ)

$ flutter pub add firebase_core
import 'package:firebase_core/firebase_core.dart';

main関数でFirebase.initializeApp()を呼び出す

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

...

firebase_coreを導入したら上記コードのようにmain()Firebase.initializeApp()を呼び出します。FlutterでFirebaseを使用するのに必要なおまじないだと思っておきましょう。

これでAndroidアプリへのFirebase導入は完了です。

参考

  • URLをコピーしました!
目次