Flutter webにFirebase v9を入れようとしたら方法がめっちゃ変わってた

image

この記事は、【 可茂IT塾 Advent Calendar 2022 】の2日目の記事です。

Flutter webにFirebaseを入れようとしたらハマりました。。。
Flutterのどこかのバージョンで仕様が変わったのかもしれません。それかFirebaseはFirebase v9からかなり仕様が変わったので、その辺りの影響があったかもです。

使用バージョン

  • Flutter: 3.3.8
  • Firebase: 9.x

エラー内容

Uncaught (in promise) Error: [core/no-options] Firebase: Need to provide options, when not being deployed to hosting via source..

ちゃんと web/index.html にこんなイメージでFirebaseのConfigを設定してたんですが。。。

<html>
  ...
  <body>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

    <!-- Firebase Configuration -->
    <script>
      var firebaseConfig = {
        apiKey: "...",
        authDomain: "[YOUR_PROJECT].firebaseapp.com",
        databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
        projectId: "[YOUR_PROJECT]",
        storageBucket: "[YOUR_PROJECT].appspot.com",
        messagingSenderId: "...",
        appId: "1:...:web:...",
        measurementId: "G-...",
      };

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>

  </body>
</html>

参照: https://firebase.flutter.dev/docs/manual-installation/web/#initializing-firebase

エラーになってしまいました。

正しい実装方法

上記の参照URLにも、

This page is archived and might not reflect the latest version of the FlutterFire plugins. With the latest plugins, manual installation is not required. You can find the latest information on firebase.google.com:

https://firebase.google.com/docs/flutter/setup

と、記載がありましたね。もうこのやり方は古かったです。

もうindex.htmlに記述しなくてよい

最新のセットアップページに飛んでその通りにやるだけなのですが、なんと、、、もうindex.htmlにFirebaseの記述をしなくて良いのです!

やる事

ターミナルで、

flutterfire configure

を打つと、これで自動的に firebase_options.dart というファイルが作成されます。あとはFlutter側のFirebase初期化時にそれを使用するだけ。

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

最後に

これはiOS/Androidで既に動いていたプロジェクトをWeb対応する時にハマったのですが、今iOS/Androidでは、 google-services.jsonGoogleService-Info.plist をプロジェクトのネイティブ側に追加して実装しています。

なので、

await Firebase.initializeApp();

の形で初期化して動かしていたのですが、

flutterfire configure

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

すれば、それら不要なのでは??と思ってます。最新のセットアップページも鬼のようにシンプルなので、おそらくそう変わったんだと思います。

FlutterもFirebaseもどんどんパワーアップしてますね。キャッチアップが大変だぁ〜〜

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More