FlutterとFirebaseの連携で失敗したこと

Error

Flutterで簡単なアプリをつくる際にFirabaseを使いたいと考えてFlutterでFirebaseの設定を行いました。

このときエラーではまってしまったのでその内容と対応について投稿します。

今回の手順は以下のとおりです。

構成

構成は以下のとおりです

アプリ名 バージョン
windows 11
Flutter 3.0.4
Android Studio 4.11
Firebase CLI 11.8.0
nvm 1.1.9
node(動作できない) 18.8.0
node(動作できる) 16.17.0

結果としてはnodeのバージョンが影響していました。

設定手順

設定手順について記載します。

nvm-windowsインストール

Firebaseを使う場合Windows用の Firebase CLI をインストールする必要があります。

Windows版は、①スタンドアロンバイナリと②npm(nodeパッケージマネージャ)からインストールを行うことができます。

最初に私は①スタンドアロンバイナリ版で行ったのですが設定に失敗しました。このため、npmからのインストールを試しました。

nvmをインストールする場合は以下を参照してください。

nvm-windows

nvmをインストールしたら、環境パスを設定します。

npmインストール

nvmをインストールしたら、npmをインストールします。ここでは、16.17.0をインストールしました。

2022年09月04日現在だと18.8.0では動作しませんでした。

    
nvm install 16.17.0
  
  

firebase-toolsインストール

npmをインストールしたら、firebase-toolsをインストールします。

詳細な手順は以下を参照してください。

Firebase CLI リファレンス

    
npm install -g firebase-tools
  
  

FlutterFire CLIインストール

FlutterFire CLIをインストールします。

こちらはFirebaseの画面に表示されています。

    
dart pub global activate flutterfire_cli
  
  

Flutter プロジェクト 構成ファイル作成

Flutter プロジェクト ディレクトリのルートで次のコマンドを実行します。

    
flutterfire configure --project=xxxxx
  
  

これで、プラットフォームごとのアプリが Firebase に自動的に登録され、lib/firebase_options.dart 構成ファイルが Flutter プロジェクトに追加されます。

firebase_core設定

これでできたと思ったのですが、firebase_coreでエラーが発生していました。このため以下のコマンドを実行しました。

Flutter アプリに Firebase を追加する

    
flutter pub add firebase_core
  
  

上記実施後以下のコマンドでFlutter アプリの Firebase 構成を最新にします。

    
flutterfire configure
  
  

まとめ

今回の投稿は、FlutterでFirebaseの設定手順を紹介しました。FlutterもFirebaseもどんどん新しくなっていますが、最新のバージョンの対応が追い付いていません。

動かないときなど、バージョンを落として対応してみてはいかがでしょうか?

コメント

0 件のコメント:

コメントを投稿

コメントをお待ちしています。