![見出し画像](https://assets.st-note.com/production/uploads/images/38904154/rectangle_large_type_2_804ffc69bdee97acfadf98c0ea9484ac.jpeg?width=1200)
Photo by
mericanadesico
【Flutter】FutureBuilderで処理後にウィジェットを表示する
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秒待機』と表示するようになっています。
この記事が気に入ったらサポートをしてみませんか?