かとのぼのマイコード・マイライフ

個人開発者かとのぼのプログラミングと雑談のブログです。たまに読書と銭湯も

FlutterとFirebaseの連携方法【AndroidとiOS】

f:id:katonobo:20191017180242p:plain

FlutterとFirebaseを連携させるため最初の設定方法を忘れないようにメモとして残します。

【前提】

  • Flutterの開発のエディタはAndroid Studio
  • Flutterのプロジェクトは作成済み
  • firebaseはすでにアカウントあり

Android

基本的なセッティングの方法はこちらのリンクを参考にすること。

Flutter アプリに Firebase を追加する  |  Firebase

以下はAndroid Studio側とFlutter側の設定手順

プロジェクト名(パッケージ名)は「build.gradle」から

FIrebaseのプロジェクトを作ろうとすると、appの名前を入力する箇所が出てくる。

f:id:katonobo:20191017172300p:plain

この名前はFlutterと揃える必要がある。

Flutterプロジェクト側の設定で、「android/app/build.gradle」にある「applicationId」が該当のパッケージ名となるのでアプリケーション名を入力する。(目安は35行くらいからのdefaultConfig内)

ここの名前をコピーして(ダブルクォーテーションはもちろん抜きで)、Firebase側のパッケージ名に貼り付け。アプリを登録をクリック(残り二つは空欄でもおっけー)。

コンフィグファイルをダウンロードしてFlutter側に設置

「アプリを登録」を押すと、コンフィグファイル(google-services.json)のダウンロードをするように促される。それをダウンロードし、Flutterのプロジェクトにファイルを置く。

ファイルを置く場所は、「android/app/google-services.json」となるようにする。ファイルを置くと「Gitをどうするか?」みたいな質問があるけどあんまり関係ないので「No」で良い。

Firebase SDKの設定

次に、ルートレベル(プロジェクト レベル)の Gradle ファイル(build.gradle)に、Google サービス プラグインを含めるためのルールを追加する。

実は「build.gradle」は「android/build.gradle」と「android/app/build.gradle」と二つある。

こちらはプロジェクトレベルなので「android/build.gradle」での設定となる。

build.gradleファイルの中にdependenciesがあるので(7行目くらい)そこに

classpath 'com.google.gms:google-services:4.2.0'

のようにclasspathを追加する。もちろんバージョンは変化する

詳しくは先ほど紹介した

Android プロジェクトに Firebase を追加する  |  Firebase

のステップ3の2から読むこと。

次に、 「android/app/build.gradle」の設定。

追加するのは二つ。

一つは

implementation 'com.google.firebase:firebase-core:16.0.1'

 こちらは59行目あたりにある「dependencies」の中に追加する。

もう一つは、

apply plugin: 'com.google.gms.google-services'

 こちらは一番最後の行に追加する

これでAndroidの設定は完了。

iOS

こちらもFirebaseのプロジェクトの設定をおこなう。

f:id:katonobo:20191017174326p:plain

iOSバンドルIDをFlutterのプロジェクトと同じにする必要がある。

Xcodeで名前を確認、設定する

Flutterのプロジェクト側で「ios/Runner」ファルダの部分で右クリックして「Reveal in Folder」をクリック。

f:id:katonobo:20191017174715p:plain

「Runner.xcodeproj」をダブルクリックする。するとxcodeが起動する。

画面が開いたら、左上の「Runner」をクリック。

そこに「Bundle Identifier」があるので、そこの名前を変更する。

あとはその名前をFirebaseのiosバンドルIDにペーストしてアプリを登録をクリック。

コンフィグファイルをダウンロードしてxcodeで設置

コンフィグファイルをダウンロードして、先ほど開いたXcodeの「Runner」フォルダの下に置く。

「Runnger/GoogleService-info.plist」となる。

ファイルを置くと、チェック画面が出るので以下のようにチェックがついてるか確認すること。

f:id:katonobo:20191017175849p:plain

これでXcodeは終了してオッケー。

Firebase側でその後に現れる指示はFlutterがやってくれるのでこちらで設定する必要がない。

 

これでFIrebaseの機能を使う準備が整った。