広告
Flutterラボの
プレミアム会員になる
【Flutter】FutureBuilderで処理後にウィジェットを表示する
2020.11.16
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秒待機』と表示するようになっています。
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (222本)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13