Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
26
Help us understand the problem. What are the problem?

posted at

updated at

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

目的

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を下げないような処理にしたいですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
26
Help us understand the problem. What are the problem?