【main.dart準備】Firebase.initializeAppでアプリ起動前にFirebaseを初期化する
このページでやること
このページでは、main.dart にFirebaseの初期化処理を書きます。
初期化とは、アプリがFirebaseを使える状態にする準備のことです。
今回のゴールは、main.dart の最初を次の形にすることです。
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const WorkBoardApp());
}
Firebase公式のFlutterセットアップ手順でも、main.dart に firebase_core と firebase_options.dart を読み込み、Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform) を実行してから runApp() する流れが案内されています。
https://firebase.google.com/docs/flutter/setup
まず出てくる単語
| 単語 | 一言説明 |
|---|---|
main.dart | Flutterアプリの入り口になるファイル |
main() | アプリが最初に実行する関数 |
async | 時間がかかる処理を待てるようにする書き方 |
await | 処理が終わるまで待つ命令 |
Firebase.initializeApp() | Firebaseを使える状態にする処理 |
firebase_options.dart | Firebase接続用の設定ファイル |
runApp() | Flutterアプリの画面を起動する処理 |
関数とは、まとまった処理に名前をつけたものです。
作業の流れ
1. lib/main.dart を開く
↓
2. 必要なimportを確認する
↓
3. main() を async にする
↓
4. WidgetsFlutterBinding.ensureInitialized() を書く
↓
5. Firebase.initializeApp() を書く
↓
6. runApp() を最後に書く
↓
7. 保存する
↓
8. flutter run で起動する
難しいことはしません。
main.dart の上の部分だけ確認します。
Step 1：main.dartを開く
Flutterプロジェクトの中で、次のファイルを開きます。
lib/main.dart
VS Codeを使っている場合は、左のファイル一覧から開いてください。
ターミナルから開く場合は、プロジェクトのフォルダで次を実行します。
code lib/main.dart
code コマンドが使えない場合は、普通にVS Codeから開けばOKです。
Step 2：必要なimportを確認する
main.dart の一番上に、次の2つがあるか確認します。
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
今回の完成コードでは、FirestoreとAuthも使うので、最終的には次のようになります。
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
それぞれの意味は次の通りです。
| import | 一言説明 |
|---|---|
firebase_core.dart | Firebase初期化に必要 |
firebase_options.dart | Firebase接続設定を読み込む |
flutter/material.dart | Flutterの画面部品を使う |
firebase_auth.dart | ログイン機能を使う |
cloud_firestore.dart | Firestoreを使う |
import とは、別のファイルやパッケージの機能を読み込むことです。
Step 3：main()をasyncにする
普通のFlutterアプリでは、最初はこのようになっていることがあります。
void main() {
runApp(const MyApp());
}
Firebaseを使う場合は、Firebaseの初期化が終わるまで待つ必要があります。
そのため、main() に async をつけます。
void main() async {
runApp(const MyApp());
}
async は、時間がかかる処理を待てるようにするための書き方です。
Step 4：WidgetsFlutterBinding.ensureInitialized()を書く
main() の中で、最初にこれを書きます。
WidgetsFlutterBinding.ensureInitialized();
これは、Firebaseを初期化する前に、Flutter側の準備を完了させるための処理です。
難しく考えなくて大丈夫です。
Firebaseを main() の中で使うときは、ほぼセットで書くものだと覚えてください。
Step 5：Firebase.initializeApp()を書く
次に、Firebase初期化を書きます。
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
Firebase.initializeApp() は、FlutterアプリでFirebaseを使えるようにする処理です。
DefaultFirebaseOptions.currentPlatform は、今動かしている環境に合ったFirebase設定を選ぶものです。
たとえば、
iPhoneで動かす
↓
iOS用のFirebase設定を使う
Androidで動かす
↓
Android用のFirebase設定を使う
Webで動かす
↓
Web用のFirebase設定を使う
というイメージです。
この DefaultFirebaseOptions は、前のページで作った firebase_options.dart の中に入っています。
Step 6：runApp()を最後に書く
Firebaseの初期化が終わったら、最後にアプリを起動します。
runApp(const WorkBoardApp());
runApp() は、Flutterの画面を表示し始める処理です。
大切なのは、順番です。
Firebaseを準備する
↓
アプリ画面を起動する
なので、runApp() は Firebase.initializeApp() のあとに書きます。
完成形
main.dart の最初は、この形にしてください。
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const WorkBoardApp());
}
WorkBoardApp は、この教材で作るアプリ本体のクラス名です。
クラスとは、画面や部品の設計図のようなものです。
よくある間違い
間違い1：asyncを忘れる
これはNGです。
void main() {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const WorkBoardApp());
}
await を使うなら、main() に async が必要です。
正しくはこれです。
void main() async {
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const WorkBoardApp());
}
間違い2：firebase_options.dartを読み込んでいない
これはNGです。
import 'package:firebase_core/firebase_core.dart';
DefaultFirebaseOptions を使うには、これも必要です。
import 'firebase_options.dart';
間違い3：runAppを先に書いている
これはおすすめしません。
void main() async {
runApp(const WorkBoardApp());
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
}
Firebaseを使う画面が先に動いてしまう可能性があります。
正しくは、Firebaseを初期化してから runApp() です。
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const WorkBoardApp());
}
Step 7：保存する
main.dart を保存します。
VS Codeなら、次で保存できます。
command + S
Windowsなら、
Ctrl + S
保存しないと、変更が反映されません。
Step 8：実行する
ターミナルで、Flutterプロジェクトのフォルダにいることを確認します。
pwd
次に実行します。
flutter run
ログイン画面が表示されればOKです。
うまくいった状態
成功すると、次の状態になります。
main.dartにFirebase初期化が書いてある
↓
アプリ起動前にFirebaseが準備される
↓
ログイン画面が表示される
このページでは、まだログインできなくても大丈夫です。
まずは、アプリが起動すればOKです。
よくあるエラーと直し方
| エラー | 原因 | 直し方 |
|---|---|---|
FirebaseOptions cannot be null | Firebase設定が読み込めていない | firebase_options.dart を確認する |
DefaultFirebaseOptions が見つからない | import漏れ | import 'firebase_options.dart'; を追加する |
Firebase.initializeApp が見つからない | firebase_core が入っていない | flutter pub add firebase_core |
await でエラー | main() に async がない | void main() async にする |
firebase_options.dart がない | flutterfire configure 未実行 | flutterfire configure を実行する |
DefaultFirebaseOptions** が見つからないとき**
次のようなエラーが出た場合です。
Undefined name 'DefaultFirebaseOptions'
確認することは2つです。
1. lib/firebase_options.dart があるか
2. main.dart に import 'firebase_options.dart'; があるか
確認コマンドです。
ls lib
firebase_options.dart がなければ、次を実行します。
flutterfire configure
Firebase.initializeApp** が見つからないとき**
次のようなエラーが出た場合です。
Undefined name 'Firebase'
この場合は、firebase_core のimportがない可能性があります。
main.dart の上にこれを追加します。
import 'package:firebase_core/firebase_core.dart';
それでも直らない場合は、パッケージを追加します。
flutter pub add firebase_core
flutter pub get
npmや環境変数はこのページで必要？
このページでは、基本的にnpmは使いません。
npmとは、Node.jsのパッケージを管理する道具です。
Firebase CLIを入れるときには使いましたが、main.dart の初期化を書く作業では使いません。
環境変数も基本的に新しく設定しません。
環境変数とは、パソコン全体で使う設定値のことです。
このページで必要なのは、次の3つだけです。
main.dartを開く
↓
Firebase.initializeAppを書く
↓
flutter runで確認する
最短作業まとめ
読むのが大変な人は、ここだけ見て進めてください。
1. lib/main.dart を開く
code lib/main.dart
2. 上の部分をこの形にする
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
runApp(const WorkBoardApp());
}
3. 保存する
command + S
4. 実行する
flutter run
チェックリスト
□ main.dartを開いた
□ firebase_coreをimportした
□ firebase_options.dartをimportした
□ main()にasyncをつけた
□ WidgetsFlutterBinding.ensureInitialized()を書いた
□ Firebase.initializeAppを書いた
□ runAppをFirebase初期化のあとに書いた
□ 保存した
□ flutter runで起動した
ミニ確認問題
Q1. Firebase.initializeApp() は何をする処理ですか？
回答
FlutterアプリでFirebaseを使える状態にする処理です。
Q2. DefaultFirebaseOptions.currentPlatform は何をしていますか？
回答
iOS、Android、Webなど、今動かしている環境に合ったFirebase設定を選んでいます。
Q3. なぜ runApp() より前にFirebaseを初期化しますか？
回答
Firebaseを使う画面や処理が動く前に、Firebaseの準備を終わらせるためです。
このページのまとめ
main.dartはFlutterアプリの入り口。- Firebaseを使う前に
Firebase.initializeApp()が必要。 awaitを使うため、main()にはasyncをつける。WidgetsFlutterBinding.ensureInitialized()はFirebase初期化前の準備。firebase_options.dartをimportしないとDefaultFirebaseOptionsが使えない。runApp()はFirebase初期化のあとに書く。- このページでは、npmや環境変数の追加設定は基本的に不要。
次のページでやること
次のページでは、LINE風の見た目を作っていきます。
AppColors を使って、アプリ全体の色を管理し、ログイン画面やトーク一覧の雰囲気を整えていきます。