概要
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; }, ),