🌅

Flutter Webでfirebeseのイニシャライズがうまくいかなかった件

2022/11/06に公開約3,400字

発生したエラー

Error: Assertion failed: file:///Users/[ユーザー名]/developer/flutter/.pub-cache/hosted/pub.dartlang.org/firebase_core_web-2.0.1/lib/src/firebase_core_web.dart:207:11
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49  throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3    assertFailed
packages/firebase_core_web/src/firebase_core_web.dart 207:18                  initializeApp
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50            <fn>
dart-sdk/lib/async/zone.dart 1653:54                                          runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                    handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                    handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5                                     [_completeWithValue]
dart-sdk/lib/async/future.dart 528:22                                         <fn>
dart-sdk/lib/async/zone.dart 1653:54                                          runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                    handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                    handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5                                     [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 639:7                                     callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>

エラーの発生しているらしいコードのリンクに飛んでみると、

        assert(
          options != null,
          'FirebaseOptions cannot be null when creating the default app.',
        );

このoptionsがnullだとマズイらしい。

エラー発生した時のコード

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

改修後のコード

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Firebase.initializeAppの引数にoptionsを追加するとよいらしい。
ただし、DefaultFirebaseOptionsを使うには少し作業が必要なので以下で解説。

結論

結局、公式ドキュメントが最強ということ。
こちらを参考にして手順通りに実行していったらうまくいった。
https://firebase.flutter.dev/docs/overview/#initialization

実行の流れ

firebase_coreのプラグインを追加する。

% flutter pub add firebase_core

CLIをインストールする。

% dart pub global activate flutterfire_cli

configureコマンドを実行し、firebaseプロジェクトとプラットフォームを選択する。

% flutterfire configure

i Found N Firebase projects. Selecting project [プロジェクト名]
✔ Which platforms should your configuration support (use arrow keys & space to select)? web

/libにfirebase_options.dartというファイルが追加されるので以下のインポート文を追加する。

main.dart
import 'firebase_options.dart';

DefaultFirebaseOptionsが使えるようになる。

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

Discussion

ログインするとコメントできます