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もどんどんパワーアップしてますね。キャッチアップが大変だぁ〜〜

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More