アプリを最初に開いたとき、initStateを待って描画させたい

Question

実現したいこと

タイトルの通り、アプリを最初に開いたとき、initState内のデータベースの取得を待って描画させたいです。
現状だとデータベースの値が反映される前にwidgetが生成(?)されてしまって、

createsteatが実行されたあとinitStateが実行されているのでそれが原因かなと思っているのですが解決策が浮かばず...
よろしくお願いします。

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    Future.delayed(Duration.zero).then((_) async {
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　〜〜省略〜〜

Answer 1

一般的にFuture(もしくはasync関数)での結果をウィジェットの内容として使うのであれば、FutureBuilderを使う(推奨方法)か表示用のデータが集まった後にsetStateを呼び出すかのどちらかです。

以下はFutureBuilderのAPIヘルプのリンクです。
https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

このサンプルを見れば分かるんじゃないでしょうか。

上のコードでは実装されている関数だけで動作順序を見ると、以下の様になるんじゃないでしょうか。
多分Future内の関数はbuildでウィジェット作成の後に呼び出される感じです。

1. 番号リストcreateStateで_MyHomePageStateのインスタンスを作成
2. initStateが呼び出されFutureの実行が予約される
3. buildでウィジェットの作成をする
4. Futureに登録されている関数が実行される

initState内かbuildでウィジェット作成前に、initStateで呼び出したFutureをawaitすればFuture内の関数の処理完了後ウィジェットの作成を行うこともできますが、これはFutureの処理時間が一瞬である前提であれば良いですが、処理時間が長期に及ぶ場合、そこで処理がいったん止まるので、いい対策とは言えないです。
initState内でawaitする件については、initStateがもともとasyncな関数ではなく、上位側からawaitされていないので、対応として問題があるので記述として削除しました。

---

initState内のFuture関数内でsetStateする処理のサンプルです。

class ListTile2 extends StatefulWidget {
  const ListTile2({Key? key}) : super(key: key);

  @override
  State<ListTile2> createState() => _ListTile2State();
}

class _ListTile2State extends State<ListTile2> {
  @override
  void initState() {
    super.initState();
    Future(() async {
      await Future.delayed(const Duration(seconds: 1));
      value = "hoge";
      setState(() {});
    });
  }

  String value = "10";  // これが表示用のデータで初期値10でFuture内でhogeに変更している。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ListTile2 test"),
      ),
      body: Card(
        child: ListTile(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [Text(value), const Text("10")],
          ),
          trailing: const Icon(Icons.arrow_forward_ios),
        ),
      ),
    );
  }
}

Comments

[hikagami]

回答ありがとうございます。
>> initState内かbuildでウィジェット作成前に、initStateで呼び出したFutureをawaitすればFuture内の関数の処理完了後ウィジェットの作成を行うこともできますが
待ち時間は一瞬であるし、initState内で複数のsetStateを行いたいのでこちらの方法を取らせてもらおうかと思っています。しかし自分でいじってみたもののやり方が分からず...
```
void initState(){
super.initState();
Future(()async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
final ref = FirebaseDatabase.instance.ref();

final ~~~ = await ref.child(~~~).get();
final ~~~ = await ref.child(~~~).get();
final ~~~ = await ref.child(~~~).get();

setState(() {
~~~省略~~~
}
);

}
);
}
```
現在このような感じなのですが、どう変えればFutureをawaitをAwaitさせられるのでしょうか。

[ta.fu]

一部出来ないことを書いてしまったので回答修正しました。
あとinitState内のFutureでsetStateするサンプルコードを追加しておきました。

なお、コメント提示されたコードの場合、DBから取り出したデータはあくまでFuture内の関数内でのみ完結しているような実装と見受けられます。
await ref.childで取り出したデータをクラスメンバーの変数に代入しそれをウィジェットで表示するような実装にしないとだめだと思います。
それともsetState内の省略と書かれた部分でそれをやっているのでしょうか。
呈示されたコードでは不明な部分が多すぎるので回答はできないです。

[hikagami]

返答ありがとうございます。
提示していただいたコードですが、実行すると"10"が1秒ほど表示されると思うのですが、本質問は10(初期値)を表示せずに最初からfogeという値を入れたいというものです。
言葉足らずで申し訳有りません。

コードも変な省略をしてしまいましたが、提示していただいたコードと全く同じ処理です。

[ta.fu]

呈示したコードでは初期値10としましたが、それを空白にしておけば、ユーザーの見た目では初期値としてDBから取得したデータを表示したととらえることもできるのですが、そういう考え方はとれませんか？
今回待機時間を1秒としましたが、例えばDB取得に10ms以内とかであればユーザーに認知はできないと思います。

あと本当に初めから表示させたいのであれば、MyHomePageを呼び出す側で値を確定しておき、パラメータなどでその値を渡すという方法しかないと思います。
一つの方法としては、Future関数をawaitで完了待ちした後にNavigatorでMyHomePageにページに遷移するという感じでしょうか。
関連知識の習得等考えると、先は長いと思います。(しかしよく使う考え方なので覚えて損はないですが。)

[hikagami]

ありがとうございます。
そうですね、そもそもの知識量が全く足りていないので精進したいと思います...

今回はお付き合いいただきありがとうございました。