ここ最近、Flutterでアプリを作ってきてある程度の知識がたまってきたので、徐々にこちらでもアウトプットしていこうと思います。
アプリの機能が複雑になってくると、外部との通信や重たい処理の終了を待ってからWidgetを生成したいときがあります。そんなときはFutureBuilderという仕組みを使うと簡単に非同期でWidgetが生成できます。
FutureBuilderの使い方
FutureBuilderはその名の通り、「Future = 非同期処理」の結果を受けてWidgetをビルドする仕組みです。使い方としては、終了を待ちたい処理をfutureに、その結果を受けて実際にWidgetを生成する処理をbuilderに定義します。構文的には以下のような形です。
FutureBuilder(
future: <何らかの非同期処理>,
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
<処理終了後のWidget生成処理>
} else {
<処理中のWidget生成処理>
}
},
)これだけだとよく分からないので、もう少し詳細に解説します。
builderについて
builderに指定する処理の中でWidgetを生成するわけですが、その処理はBuildContextとAsyncSnapshotの2つを引数に持つ必要があります。
この内、AsyncSnapshotにfutureで指定した非同期処理の結果が詰め込まれるため、このデータを使ってWidgetを生成します。
非同期処理の状態を見る
futureに指定する処理は非同期なので、Widgetツリーの構築時点で処理が終了しているかどうか分かりません。FutureBuilderの場合、指定した非同期処理が終了したかどうかはAsyncSnapshotのhasDataというメンバで判断することができます。
これがtrueであれば終了（＝データがある）状態、falseであれば処理待ち（＝データがない）状態になります。
非同期処理の結果を取り出す
hasDataがtrueであれば、AsyncSnapshotのdataメンバを使って処理の結果を受け取ることができます。あとはそのデータを使ってWidgetを生成してあげればOKです。
注意ポイント
true/falseどちらの状態に対してもWidgetを生成する必要があるので、falseなら処理中表示だったり空Containerを作るなどの対応が必要になります。
まとめ
FutureBuilderを使えば、簡単に非同期でWidgetを生成することができます。非同期処理の待ち合わせをフレームワーク内で解決してくれるのは嬉しい限りです。
FutureBuilderはあくまでも、Widgetツリーの生成時に1回だけWidgetを生成する仕組みになります。一度Widgetツリーを構築したあとで、ピンポイントで動的にWidgetを再生成したいときはStreamBuilderという別の仕組みを使うことになりますが、それはまた別の記事で紹介したいと思います。
ではでは
参考
FutureBuilder class - widgets library - Dart API - Flutter API
