Flutter webにFirebase v9を入れようとしたら方法がめっちゃ変わってた
この記事は、【 可茂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:
と、記載がありましたね。もうこのやり方は古かったです。
もう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.json や GoogleService-Info.plist をプロジェクトのネイティブ側に追加して実装しています。
なので、
await Firebase.initializeApp();
の形で初期化して動かしていたのですが、
flutterfire configure
と
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
すれば、それら不要なのでは？？と思ってます。最新のセットアップページも鬼のようにシンプルなので、おそらくそう変わったんだと思います。
FlutterもFirebaseもどんどんパワーアップしてますね。キャッチアップが大変だぁ〜〜
カリキュラムなし！学びたいことだけをプロと学べる『TechCampus』の詳細情報
カリキュラムなし！学びたいことだけをプロと学べる『TechCampus』の詳細情報！興味のある人はぜひコミュニティに参加ください！
Read More
可茂IT塾ではFlutterインターンを募集しています！
可茂IT塾ではFlutterインターンを募集しています！可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。
Read More
カリキュラムなし！学びたいことだけをプロと学べる『TechCampus』の詳細情報
カリキュラムなし！学びたいことだけをプロと学べる『TechCampus』の詳細情報！興味のある人はぜひコミュニティに参加ください！
Read More可茂IT塾ではFlutterインターンを募集しています！
可茂IT塾ではFlutterインターンを募集しています！可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。
Read More