ふくしま

ソフトウェアエンジニア

FutureBuilder で future に入れた値はどこに行くのか分からなくて四苦八苦した話。

概要

FutureBuilder で非同期処理後に Widget を表示させたかった。 future フィールドに非同期処理を入れるのはわかったが、その非同期処理で得られた結果がどこにあるのか分からなかった。 結論、snapshot.data に入っていた。

FutureBuilder の基本

以下は自分の理解であるからして、間違っているかもしれない。正しくは、公式ページを参照されたし。

まず、FutureBuilder は Widget である。 しかも、ただの Wdiget ではなく、非同期処理の前後で表示を切り替えることができる。

では、FutureBuilder 内でどうやって非同期処理が完了したのかを判定しているかというと、snapshot.connectionSatate で判定できる。

そして、非同期処理による結果は、snapshot.data に入る。以下のようにコードを書けば良い。

FutureBuilder(
  future: _getContent(), // Future<String> を返す非同期処理
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    Widget childWidget;
    if (snapshot.connectionState == ConnectionState.done) { // 非同期処理完了時
      if (snapshot.hasError) { // 非同期処理でエラーが起きた時(処理は適当)
        childWidget = const Text('再表示してください。');
      }
      childWidget = Text('${snapshot.data}'); // 非同期処理で得られた結果。
    } else {
      childWidget = const CircularProgressIndicator();
    }
    return childWidget;
  },
),

参考文献