【Flutter】FutureBuilderで処理後にウィジェットを表示する

#Flutter#dart#ハッチアウトスクール#Flutterstudy
2秒間は『2秒待機』という文字列を表示し、2秒後に『OK』という文字列を表示するような場合に、『FutureBuilder』ウィジェットを使用して実装する例を紹介します。
まずは、2秒処理をストップさせた後に『OK』という文字列を返すメソッドを用意します。
Future<String> buildString() async {
await Future.delayed(Duration(seconds: 2)); //2秒待機
return 'OK';
}
FutureBuilderウィジェットにの、futureプロパティに先ほどのbuildString()メソッドを設定し、builderプロパティに実際に表示するウィジェットを記述します。
AsyncSnapshotのconnectionStateは処理の進捗状況で、dataは返ってきた値です。
body: FutureBuilder(
future: buildString(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if(snapshot.connectionState == ConnectionState.done) { //futureで設定した処理が終わっていれば
return Align(child: Text(snapshot.data), alignment: Alignment.topCenter,);
} else {
return Align(child: Text('2秒待機'), alignment: Alignment.topCenter,);
}
},
)
このコードでは、進捗状況が『完了』であれば返ってきた『OK』という文字列をTextウィジェットで表示し、そうでなければ『2秒待機』と表示するようになっています。