Flutter × Firebaseのセットアップ後、画面に表示されて欲しいものが表示されなく、真っ白な状態になっている。

実現したいこと

画面に表示されない問題を解決させてFlutter × Firebase開発の理解を深めてお手本の動画と同じ挙動を得たい。

前提

https://youtu.be/zRRCY9mJNNE
を見ながら、
Flutter × Firebaseの組み合わせでチャットアプリを作っています。

発生している問題・エラーメッセージ

https://youtu.be/zRRCY9mJNNE
を参考にしながら、
Flutter × Firebase のセットアップからシミュレータを使ってテストという段階での問題です。
お手本の動画では、11:00前後でシミュレータを起動してここまでの実装が反映されたものが表示されています。しかし自分の環境では表示ができていません。

該当のソースコード

main.dart
1import 'dart:io';
2
3import 'package:cloud_firestore/cloud_firestore.dart';
4import 'package:cupertino_chat_app/screens/calls.dart';
5import 'package:cupertino_chat_app/screens/chats.dart';
6import 'package:cupertino_chat_app/screens/people.dart';
7import 'package:cupertino_chat_app/screens/settings.dart';
8import 'package:firebase_auth/firebase_auth.dart';
9import 'package:firebase_core/firebase_core.dart';
10import 'package:flutter/cupertino.dart';
11
12const bool useEmulator = true;
13
14Future<void> main() async {
15  WidgetsFlutterBinding.ensureInitialized;
16  await Firebase.initializeApp();
17  if (useEmulator) {
18    _connectToFirebaseEmulator();
19  }
20  runApp(const MyApp());
21}
22
23Future _connectToFirebaseEmulator() async {
24  const fireStorePort = "8080";
25  const authPort = "9099";
26  final localHost = Platform.isAndroid ? "10.0.2.2" : "localhost";
27  FirebaseFirestore.instance.settings = Settings(
28    host: "$localHost:$fireStorePort",
29    sslEnabled: false,
30    persistenceEnabled: false,
31  );
32
33  await FirebaseAuth.instance.useAuthEmulator(
34    "http://$localHost",
35    "http://$authPort" as int,
36  );
37}
38
39class MyApp extends StatelessWidget {
40  const MyApp({super.key});
41
42  // This widget is the root of your application.
43  @override
44  Widget build(BuildContext context) {
45    return CupertinoApp(
46      debugShowCheckedModeBanner: false,
47      home: HomePage(),
48      theme: const CupertinoThemeData(
49        brightness: Brightness.light,
50        primaryColor: Color(0xFF08C187),
51      ),
52    );
53  }
54}
55
56class HomePage extends StatelessWidget {
57  HomePage({super.key});
58  final List screens = [
59    const Chats(),
60    const Calls(),
61    const People(),
62    const SettingsScreen(),
63  ];
64
65  @override
66  Widget build(BuildContext context) {
67    return CupertinoPageScaffold(
68      child: CupertinoTabScaffold(
69        resizeToAvoidBottomInset: true,
70        tabBar: CupertinoTabBar(
71          items: const [
72            BottomNavigationBarItem(
73              label: "Chats",
74              icon: Icon(CupertinoIcons.chat_bubble_2_fill),
75            ),
76            BottomNavigationBarItem(
77              label: "Calls",
78              icon: Icon(CupertinoIcons.phone),
79            ),
80            BottomNavigationBarItem(
81              label: "People",
82              icon: Icon(CupertinoIcons.person_alt_circle),
83            ),
84            BottomNavigationBarItem(
85              label: "Settings",
86              icon: Icon(CupertinoIcons.settings_solid),
87            ),
88          ],
89        ),
90        tabBuilder: (BuildContext context, int index) {
91          return screens[index];
92        },
93      ),
94    );
95  }
96}
97

試したこと

この問題は
https://teratail.com/questions/uekzaou5epo1cr
の続きとなっています。
そのためにわからないことが多い状況です。async, awaitの関係やuseAuthEmulatorの使い方、
Flutter × Firebase のセットアップのやり方などです。
以下、参考にしたページです。

async, awaitの関係についてヒットしたページ
https://twitter.com/FlutterUniv/status/1618429849122791425?s=20&t=lnE4TukpVmvcbKziWPMh3Q
https://twitter.com/FlutterUniv/status/1618163578867175429?s=20&t=lnE4TukpVmvcbKziWPMh3Q

Flutter × Firebase のセットアップのやり方についてヒットしたページ
https://note.com/yusukeoshiro/n/nacbcc2904944
https://blog.flutteruniv.com/flutter-firebase/
https://qiita.com/reika_i/items/f57376cbcb45a29fcd91

これらからわかったことは、最初にFlutter Engineとソースコードをバインドさせて通信ができるようにしてその後にMyAppの処理がされるということです。なので考えられることとしたら、そもそもFirebaseとの連携がうまくいっていないもしくはそもそも表示されるようなコードになっていないということです。
しかし、Flutter × Firebase開発が初めてだということもありまだまだ自己解決が難しい状況です。
既にこの問題が発生して1日経過しており、自分なりに上記のWebページをもとにしてそれを実行するなど試してはいますが状況が改善しないのでFirebaseの連携設定について有識者の方にご教示いただきたいと考えています。何か情報の追記依頼などあればコメントにお願いします。

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1
22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices
(Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.74.3)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

参考にした動画
https://www.youtube.com/watch?v=zRRCY9mJNNE

参考にしたWebページ一覧

WidgetsFlutterBinding.ensureInitialized();について調べて参考になったページ
https://qiita.com/kurun_pan/items/04f34a47cc8cee0fe542

追記

2023/02/13 追記
Twitterにてmain.dartファイルの15行目WidgetsFlutterBinding.ensureInitialized;を、
WidgetsFlutterBinding.ensureInitialized();に変更する必要があるのでは？とアドバイスを受領。

2023/02/14 追記
上記のアドバイスの通りに、WidgetsFlutterBinding.ensureInitialized;を、
WidgetsFlutterBinding.ensureInitialized();に変更したところエラーもなく期待通りの挙動になりました。

Jedda

2023/02/13 04:06

ご指摘ありがとうございます。試したことの記載がわかりにくかったかもしれないので、少し修正しました。よろしくお願いします。

Jedda

2023/02/13 04:26

ご指摘ありがとうございます。何についてご教示いただきたいというのかを追記させていただきました。

moriman

2023/02/13 09:57

確認なのですが画面真っ白で何もエラー出てないんですかね？ GitHubのリポジトリをcloneして実行してますか？とりあえず_connectToFirebaseEmulator の呼び出し箇所をコメントアウトして動きを見たらどうでしょう？

Jedda

2023/02/13 11:52

回答ありがとうございます。＞確認なのですが画面真っ白で何もエラー出てないんですかね？これに関してですが、エラーメッセージは発生せず本当に真っ白という状況です。＞GitHubのリポジトリをcloneして実行してますか？これに関してですが、実行はしていません。＞とりあえず_connectToFirebaseEmulator の呼び出し箇所をコメントアウトして動きを見たらどうでしょう？コメントアウトですね。やってみます。