FlutterにFirebaseの導入が超簡単便利に！FlutterFireを使用する #Flutter

はじめに

今までのFirebase導入手順とかどうでも良い！という方は「2.FlutterFireを使用する」からご覧ください。

1.今までの手順

FlutterでのiOS/Androidアプリケーション開発でFirebaseを導入するには
次のような手順が必要になっていました。

まずはFirebaseで新規プロジェクトを作成します。
次にAndroid、iOSそれぞれにFiorebaseを導入していきます。

■Android

Androidパッケージ名を入力
1.1. android/app/src/main/AndroidManifest.xmlを開く
1.2. package="xxx.xxxxx.xxxxx" 「" "」の中がパッケージ名
「アプリを登録」を選択
google-service.jsonをダウンロード
ダウンロードしたjsonファイルを android/app 配下に配置
Firebase SDKの追加
6.1. プロジェクトレベルのbuild.gradleのdependenciesにclasspathを追加
6.2. アプリレベルのbuild.gradleにapply pluginを追加
6.3. アプリレベルのbuild.gradleのdepecdenciesにimplementationを追加
FirebaseのコンソールにAndroidアプリが追加されていることを確認

■iOS

※前提：Macを使用していて、Xcodeの準備ができていること

iOSバンドルIDを入力
1.1. Finderで自信のプロジェクトのios/Runner/Runner.xcworkspaceをXcodeで立ち上げる
1.2 Runnerを選択
1.3 Bundle Identifireに記載されているパッケージ名をコピペ
「アプリを登録」を選択
GoogleService-Info.plistをダウンロード
ダウンロードしたplistファイルを Runner/Runner 配下に配置

pubspec.yamlにfirebase_core: ^x.x.xを追加　xはバージョン

以下をmain.dartのmain関数に追加

  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

ファイルダウンロード、配置、コードを書き換えたりと、かなり面倒でした。。。

2.FlutterFireを使用する

https://firebase.flutter.dev/docs/overview
↑こちらでやることを簡単にまとめて記載していきます。

1.従来と同じように、まずはFirebaseで新規プロジェクトを作成
2.自身のプロジェクトのターミナルで以下のコマンドを実行

flutter pub add firebase_core

3.pubspec.yamlファイルに「firebase_core: ^x.x.x」が追加されていることを確認　xはバージョン

4.Firebase CLIを導入 ※一度導入すればOK! 導入済みの方は次へ
　https://firebase.google.com/docs/cli
　CLIが導入できていれば、ターミナルでfirebaseコマンドが実行出来るはず

5.ターミナルでコマンドを実行してfirebaseにログイン

firebase login

　コマンドを実行すると以下のように聞かれるので「Y」を入力

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information?  (Y/n)

　googleログインページが立ち上がるので、ログインする

6.次のコマンドを実行

dart pub global activate flutterfire_cli

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

flutterfire configure

　コマンドを実行すると、自身のプロジェクトが一覧表示されるので、方向キーで選んで選択
　色々聞かれたら「Y」でEnter

7.自身のプロジェクトの lib配下に「firebase_options.dart」が作成されていればOK
8.以下の4行のコードを「main.dart」のmain関数にコピペ

// main関数をasyncにするのを忘れずに
void main() async {
  // この下から4行
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

9.main関数の「Firebase」と「DefaultFirebaseOptions」でエラーが発生するのでインポートで解決

以上でFirebaseの導入、連携が完了です。
いちいちファイルをダウンロード、配置などの手間もなくなり
Firebase CLIさえ導入していれば、びっくりするほど簡単になりました。