Flutterの今週のWidgetをやってみた その2 FutureBuilder

こんにちは、株式会社PentagonでFlutterを使ったアプリ開発をしているd-ariakeです。
https://pentagon.tokyo
今日は「Flutter Widget of the Week」という動画でFutureBuilderについて学んでみたのでまとめてみます!
動画によると、Dartでの非同期処理はFuture型で表現するみたいです。FutureBuilderはこのFutureの状態が変化したタイミングでリビルドを掛けてくれます。
↓ 私も今回勉強した知識を使って簡単なサンプルを作ってみました!

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
 runApp(
   MaterialApp(
     title: 'TestApp',
     theme: ThemeData(primarySwatch: Colors.blue),
     home: MyPage(),
   ),
 );
}

/// 参考: https://youtu.be/ek8ZPdWj4Qo
class MyPage extends StatelessWidget {
 static final random = Random();

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('TestApp')),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           const Text('あいさつをしましょう!'),
           Container(
             padding: const EdgeInsets.all(16),
             height: 64,
             child: FutureBuilder<String>(
               future: _loadMessage(),
               builder: (context, snapshot) {
                 final text = snapshot.data;

                 return text != null
                     ? Text(text)
                     : const CircularProgressIndicator();
               },
             ),
           ),
         ],
       ),
     ),
   );
 }

 Future<String> _loadMessage() async {
   await Future<void>.delayed(const Duration(seconds: 3));

   const candidates = ['Hello!', 'Bonjour!', 'こんにちは!', '你好!', '안녕하세요!'];
   return candidates[random.nextInt(candidates.length - 1)];
 }
}

アプリを読み込むと読み込み処理が走り、その間はProgressIndicatorが表示されます。その後3秒経過すると、ランダムにあいさつが表示される簡単なサンプルです!みなさんも是非FutureBuilderを使ってみてください!