広告

Flutterラボの

プレミアム会員になる

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

2020.11.16

2秒間は『2秒待機』という文字列を表示し、2秒後に『OK』という文字列を表示するような場合に、『FutureBuilder』ウィジェットを使用して実装する例を紹介します。

画像1

まずは、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とNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)