【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秒待機』と表示するようになっています。