虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

FlutterとFirebaseの接続について

FlutterとFirebaseの接続方法について解説していきます。 途中、iOSの場合と、Androidの場合で設定方法が異なりますので、章に分けております。

プロジェクトの作成

まずはプロジェクトを作成しましょう。

下記のサイトからプロジェクトを作成します。 Firebaseコンソール

[プロジェクト追加ボタン]を押してプロジェクト名を入力

Firebase

[プロジェクト作成]ボタンを入力して完了です。

Firebase

ここからはプラットフォームごとに手順が異なりますのでプラットフォームごとにご確認ください

iOS場合

iOSアプリにFirebaseを追加を押して下記の画面に各種入力していきましょう。

Firebase

iOSのBundleIdはプロジェクトをXcodeから開くとわかりますのでXcodeを開きましょう。 Project → iOS → Runner.xcworkspaceで開きましょう。

Project

Xcodeのここから確認できます。 Firebase

[Bundle Identifier]に書かれている文字をコピーしてFirebaseのバンドルID欄に貼り付け。 あと、アプリ名を任意で記載して、次へをクリックしましょう。 (App Store IDは空で問題ありません)

次に GoogleService-Info.plist をダウンロードし、Runnerフォルダ直下におきましょう

ここまでできたら準備完了です。 残りのステップは全て何もせずに次へとスキップを押しましょう。

Androidの場合

AndroidアプリにFirebaseを追加からプロジェクトに追加しましょう。

AndroidFirebase

Androidパッケージ名は Project → Android → app → src → main → AndroidManifest.xml を開きます。

開いたらそこの中にパッケージ名が書かれています。

manifest

そこをコピーしてAndroidパッケージ名のところに貼り付けましょう。 アプリのニックネークは任意で記載して次へ (デバッグ用の署名証明書のとこは空で問題ありません)

次に google-services.json をダウンロードしてandroidの下のappの下に置きましょう。 IDE またはエディタで、android/app/build.gradle を開き、次の行をファイルの最後の行として追加します。

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

android/build.gradle で、buildscript タグの中に新しい依存関係を追加します。

buildscript {
    repositories {
        // ,,,
    }
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.2.1'   // new
    }
}

これで準備は完了です。

プラグインの追加

あとは、Firebaseの使いたい機能のプラグインを入れましょう。 https://github.com/flutter/plugins/blob/master/FlutterFire.md

入れる手順はInstrationにかかれている手順通りにやれば完了です。