Zenn
🔥

【Flutter】Firebaseセットアップのやり方

2022/02/20に公開
Firebase
Flutter
Dart
tech

今回はFirebaseのセットアップのやり方です。
「難しそう…」と自分でハードルを上げていましたが、全然そんなことはなかったです！

・ここ間違ってるよ！
・こうした方がいいよ！
・この説明がわかりにくい！
などありましたらお気軽にコメントください！

使用する環境

  • Android Studio Bumblebee | 2021.1.1 Patch 1
  • macOS Monterey version12.1

参考にしたサイト

Firebase
FlutterFire

使用環境

  • PC : MacBook Air (Retina, 13-inch, 2020) Monterey v12.1
  • 開発ツール : Android Studio

1. Firebaseアカウント開設

ただGoogleアカウントを作成するだけですので割愛します。
Googleアカウントを持たれていない方は作成してください。

2. Firebaseプロジェクトを作成

  1. Firebaseを開いて、コンソールへ移動をクリック
    （ログインしていない方は先にログインが必要）
  2. コンソール画面にあるプロジェクトを追加をクリック
  3. プロジェクト名を決め、指示に従ってプロジェクトを作成

3. アプリをFirebaseに登録する

Android編

  1. Firebaseのプロジェクト画面を開き、Androidのアイコンをクリック
  2. Androidパッケージ名の入力
Androidパッケージ名の確認方法

AndroidStudioでプロジェクトを開いてandroid/app/build.gradleファイルを開く
applicationIdと記載されている右に"com.example.アプリ名"と書かれているこれがパッケージ名

  1. アプリのニックネームは自由に入力
  2. アプリを登録をクリック
  3. 2 設定ファイルのダウンロードと出てくるが無視して、上のxボタンで戻る

iOS編

  1. Android編と同様にFirebaseのプロジェクト画面を開き、アプリを追加=>iOSをクリック
  2. AppleバンドルIDを入力
AppleバンドルIDの確認方法

AndroidStudioのプロジェクトを開いて、iosを右クリック
Flutter | Open iOS module in XcodeでXcodeを開く
一番上のRunnerタブをクリック
General | Bundle Identifierに記載されているcom.~がバンドルID

  1. アプリのニックネームは自由に入力
  2. アプリを登録をクリック
  3. 2 設定ファイルのダウンロードは同様に無視して、上のxボタンで戻る

4. Firebaseの初期設定

4-1. firebase_coreパッケージのインストール

ターミナルで自分のプロジェクトを開いた状態で、下記コマンドを入力

flutter pub add firebase_core

4-2. FirebaseCLIのインストール

ターミナルで下記コマンドを実行(firebase.toolsをダウンロード)

curl -sL https://firebase.tools | bash

ダウンロードが完了したら、下記コマンドを実行

firebase login

ブラウザでGoogle認証のページが開かれるので許可すれば完了

4-3. FlutterFireCLIのインストール

ターミナルで下記コマンドを実行

dart pub global activate flutterfire_cli

4-4. flutterfire configureの実行

ターミナルで下記コマンドを実行

flutterfire configure

上記コマンド実行後ターミナル画面にi Found n Firebase projects.と表示されるので、キーボードの矢印キーで自分の作成したプロジェクトを選択
自分の作成したプロジェクトが選択されていることを確認してEnter
Enterを押すと今度はプラットフォームを選択する画面へ

i Found 3 Firebase projects.
? Select a Firebase project to configure your Flutter application with › 
❯ アプリ名 (プロジェクト名)
  <create a new project>

? Which platforms should your ...と説明に書かれているように矢印キーとspaceボタンを使用してiosとandroidにチェックを入れ、Enter

? Which platforms should your configuration support (use arrow keys & space to select)? › 
✔ android
✔ ios
  macos
  web

今度はiOSのバンドルIDを聞かれるので入力してEnter

? Which ios bundle id do you want to use for this configuration, e.g. 'com.example.app'? › iOSのバンドルIDを入力する

libフォルダにfirebase_options.dartができていれば完了

5. Flutterで使うためのFirebaseの初期化処理

  1. main.dartの編集
    main.dart
    // main.dartの一部抜粋

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

設定完了

ここまでで全ての設定が完了しました。
後は自分の使いたいFirebaseの機能に応じて、パッケージをflutter pub getして使用するだけです。

FirebaseのconsoleとAndroidStudioを行ったり来たりして、ターミナル操作もありますが、以前よりかなり設定方法が簡単になってるみたいです！
あと、自分で設定してみた感じ思っていたよりも簡単だったので安心しました笑

また何か実装したことや誰かの役に立ちそうなことがあれば記事にしていきたいと思います！
ここまで読んでいただき、ありがとうございました🙇🏻‍♂️

Discussion