【Flutter/Dart】Firebaseの導入方法とセットアップ!flutterfire_cli

【Flutter/Dart】Firebaseの導入方法とセットアップ!flutterfire_cli

この記事からわかること

  • Flutter/iOS/AndroidFirebase導入する方法
  • flutterfire_cliFirebase CLIインストール手順
  • firebase_coreパッケージ
  • Automatically assigning platform `iOS` with version `12.0` on targetエラーの解消

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Firebaseの概要については下記記事を参考にしてください。

この記事ではFirebaseのプロジェクトにFlutter/アプリを登録し、セットアップするまでに必要な流れを解説しています。

FlutterアプリにFirebaseを導入する流れ

流れ

  1. Firebaseプロジェクトを作成
  2. Firebase CLIのインストールとログイン
  3. FlutterFire CLIのインストールと実行
  4. firebase_coreパッケージの導入
  5. 初期化コードの組み込み
  6. 完成

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

まずはFirebaseプロジェクトを作成します。Firebaseにアクセスして新規のプロジェクトを追加します。

Firebaseとは?登録方法や使い方、料金と注意点

ここでGoogle Analyticsとの連携を問われるので「このプロジェクトでGoogle アナリティクスを有効にする」にチェックを入れた状態で「続行」をクリックします。

Firebaseとは?登録方法や使い方、料金と注意点

するとGoogle Analyticsアカウントとの連携を求められるので紐付けたいアカウントを選択して「プロジェクトを作成」をクリックします。

【Swift UI/Firebase】iOSアプリにGoogle Analyticsを導入する方法! Firebaseとは?登録方法や使い方、料金と注意点

プロジェクトが完成したら、「Sparkプラン(無料プラン)」になっているか確認しておきます。問題がなければ「Flutterアイコン」ボタンをクリックしてFlutterアプリを登録していきます。

Firebaseとは?登録方法や使い方、料金と注意点

※ 一応各プラットフォームごとに登録することも可能にはなっています。その場合はiOSはこちら、Androidはこちらの記事を参考にしてください。

2.Firebase CLIのインストールとログイン

Flutterアイコン」をクリックするとやるべきことが表示されます。「Flutter SDK」と「プロジェクトの作成」は大抵すでに終わっていると思うのでスキップして「Firebase CLIのインストールとログイン」を行なっていきます。

【Flutter/Dart】Firebaseの導入方法とセットアップ!flutterfire_cli

インストールとログインは以下のコマンドを実行するだけです。npmコマンドを使用するためにはNode.jsのインストールも必要なので注意してください。詳細は以下の記事を参考にしてください。

$ npm install -g firebase-tools
$ firebase login // Webサイトが立ち上がりログインすれば完了

3.FlutterFire CLIのインストールと実行

続いてFlutterFire CLIのインストールと実行を行なっていきます。まずは以下コマンドを実行します。

$ dart pub global activate flutterfire_cli

続いてVimなどを使用してコマンドが通るように環境変数パスを設定します。

$ vi ~/.zshrc
# iでインサートモードに切り替え
# 以下を追記
export PATH="$PATH":"$HOME/.pub-cache/bin"
# escでモードを戻して:wqで保存して閉じる
# 反映
$ source ~/.zshrc

flutterfireのバージョンが取得できれば成功です。

$ flutterfire -v                              
1.1.0

続いてプロジェクトのルートへ移動して以下のコマンドを実行します。セットアップするプラットフォームを尋ねられるのでspaceキーで選択してEnterを押します。

[プロジェクトルート]$ flutterfire configure --project={プロジェクト名}

i Found 21 Firebase projects. Selecting project プロジェクト名
? Which platforms should your configuration support (use arrow keys & space to select)? ›
✔ android
✔ ios
  macos
  web
  windows

これでプラットフォームごとのアプリがFirebaseに自動的に登録され、lib/firebase_options.dartという構成ファイルがFlutterプロジェクトに自動で追加されます。また各プラットフォームにも必要な設定ファイル(iOSならGoogleService-info.plist / Androidならgoogle-services.json)も追加されます。

4.firebase_coreパッケージの導入

続いてfirebase_coreパッケージを導入します。以下コマンドを実行してください。これでlib/firebase_options.dartで発生しているエラーも解消すると思います。

$ flutter pub add firebase_core

5.初期化コードの組み込み

最後にFirebaseをアプリから有効にするために初期化コードを組み込みます。firebase_options.dartファイルとfirebase_coreパッケージを使用してFirebase.InitializeAppを呼び出せば完了です。

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

/// アプリのルート
void main() async {
  // 〜〜〜〜〜〜
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
}

これでFlutterアプリへのセットアップを完了することができました。あとはそれぞれ使用したいサービスごとにFirebase側とアプリ側で設定をして使用していけばOKです。

.gitignoreファイルに追加しておくファイル

FlutterにFirebaseを追加した場合、GitHubなどにソースコードを公開しているなら適切に非公開にするべきファイルを適切に.gitignoreファイルに追加しておく必要があります。基本的には各プラットフォームの設定ファイル(iOS:GoogleService-info.plist / Android:google-services.json)を非公開にしておけば問題ないと思います。


# Firebase config
android/app/google-services.json
ios/Runner/GoogleService-Info.plist

firebase_options.dartファイルにはapiKeyなども記載されているようですが公式ドキュメントに「Firebase サービスの API キーをシークレットとして扱う必要はなく、クライアント コードに安全に埋め込むことができます」と記述されているため問題ないようです。


  static const FirebaseOptions android = FirebaseOptions(
    apiKey: 'XXXXXXXXXXXXXXX-XXXXXXXXXX_XXXXX',
    appId: '1:XXXXXXXXXXXXXXXXXXX:android:XXXXXXXXXXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXXXXXXXXXX',
    projectId: 'XXXXXXXXXXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXXXXXXXXXX.firebasestorage.app',
  );

  static const FirebaseOptions ios = FirebaseOptions(
    apiKey: 'XXXXXXXXXXXXXX_XXXXXXXXXXXXXXXXXXX',
    appId: '1:XXXXXXXXXXXXXXXXXXX:ios:XXXXXXXXXXXXXXXXXXX',
    messagingSenderId: 'XXXXXXXXXXXXXXXXXXX',
    projectId: 'XXXXXXXXXXXXXXXXXXX',
    storageBucket: 'XXXXXXXXXXXXXXXXXXX.firebasestorage.app',
    iosBundleId: 'com.XXX.XXXXXX',
  );

Automatically assigning platform `iOS` with version `12.0` on target

iOS側でビルドに失敗し以下のようなエラーが発生することがあります。これは単にアプリの最低サポートバージョンの指定がfirebase_coreより低くなってしまっていることが原因です。

Error output from CocoaPods:
↳

    [!] Automatically assigning platform `iOS` with version `12.0` on target
    `Runner` because no platform was specified. Please specify a platform for
    this target in your Podfile. See
    `https://guides.cocoapods.org/syntax/podfile.html#platform`.

Error: The plugin "firebase_core" requires a higher minimum iOS deployment
version than your application is targeting.
To build, increase your application's deployment target to at least 13.0 as
described at https://flutter.dev/to/ios-deploy

そのためplatform :ios, '13.0'のようにバージョン番号をインクリメントしてあげれば解消すると思います。


# Uncomment this line to define a global platform for your project
platform :ios, '13.0'

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index