58
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

FlutterでFirebaseを使うときのFirebase.initializeApp()の呼び方

Last updated at Posted at 2020-09-01

#目的
Firebaseのバージョンが更新されたため、FlutterでFirebaseのパッケージを使用する前にFirebase.initializeApp()を呼び出す必要があります。
呼び出さずにビルドすると[core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()こんなエラーが出てしまいます。
Firebaseパッケージを使う前にどうやってFirebase.initializeApp()を呼び出そうか迷っていたので、もし同じく迷っている人がいれば参考にしてください!

きれいな呼び出し方がわからないので、ひとまず思いつく呼び出し方を残しておきます。
もっと良い方法があれば教えて下さい!

#環境
Firebase.initializeApp()を呼ぶ必要があるのはfirebase_coreの0.5.0バージョン以降です。

pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.5.0

#Firebase.initializeApp()の呼び方
ではFirebase.initializeApp()の呼び方を3つ紹介していきます。

##1つ目(FutureBuilderを使う方法)
最初はFutureBuilderを使う方法です。
StatelessWidgetのままFirebaseをイニシャライズできるのでおすすめです。
この方法では、イニシャライズに失敗したときとイニシャライズ中のWidgetを用意する必要があります。
今回の例では
エラー時は真っ白の画面にして
完了まではLoading()という読み込み中用のWidgetを表示しています。

main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() => runApp(App())

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Firebase.initializeApp(),
      builder: (context, snapshot) {

        // エラー時に表示するWidget
        if (snapshot.hasError) {
          return Container(color: Colors.white);
        }

        // Firebaseのinitialize完了したら表示したいWidget
        if (snapshot.connectionState == ConnectionState.done) {
          return MyHomeApp();
        }

        // Firebaseのinitializeが完了するのを待つ間に表示するWidget
        return const CircularProgressIndicator();
      },
    );
  }
}

##2つ目(initStateで呼び出してsetState()するやり方)
2つ目はFirebaseパッケージを使う前にinitStateでイニシャライズしてsetState()でbuild()し直す方法です。
このWidget内でinitStateのFirebase.initializeApp()が完了する前にFirebaseパッケージを使う処理を書いているとエラーになってしまうので注意してください。

main.dart
@override
void initState() {
  Firebase.initializeApp().whenComplete(() {
    setState(() {
      print('initilize completed');
    });
  });
}

##3つ目(main()を非同期にしてイニシャライズしてからアプリを表示する方法)
3つ目はmain関数でFirebase.initializeApp()を呼んで、完了してからrunAppをするやり方です。
Firebase機能をたくさん使うアプリではrunApp関数より前にイニシャライズしてしまうのが良いと思います。

WidgetsFlutterBinding.ensureInitialized()は最初に書いておかないとエラーになってしまうので気をつけてください。

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

#さいごに
アプリ起動時にFirebase.initializeApp()をしたいケースは多いと思います。
できるだけきれいなコードで書いて、なおかつUXを下げないような処理にしたいですね。

58
39
8

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
58
39

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?