たかお 
本記事では、FutureBuilder widgetのサンプルコードを紹介します。
FutureBuilderを使うことで、非同期処理のデータ読み込み状況に応じた表示の切り替えを簡単に実現することができます。
今回はFutureBuilderだけを使った一番シンプルなサンプルコードを使って重要なポイントを説明します。
本記事を読むメリット
- FutureBuilderのサンプルコードを動画イメージ付きで確認できる
- 実装時の重要ポイントを理解できる
動作イメージ
解説するサンプルコードの内容はFutureBuilderを使って、5秒間CircularProgressIndicator（青いぐるぐる）を表示した後、メッセージ「completed!!」を表示するサンプルです。
サンプルコード
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Sample Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FutureBuilder(
future: sampleFutureFunc(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Center(
child: Text(snapshot.data),
);
} else {
return CircularProgressIndicator();
}
},
),
),
);
}
Future<String> sampleFutureFunc() async {
return Future.delayed(new Duration(seconds: 5), () {
return "completed!!";
});
}
}
解説・重要ポイント
FutureBuilderの実装部分は以下の通りです。
FutureBuilder(
future: sampleFutureFunc(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Center(
child: Text(snapshot.data),
);
} else {
return CircularProgressIndicator();
}
},
)FutureBuilderには、futureとbuilderの2つのパラメータを渡します。
futureにはFuture型を返す非同期処理を渡します。
今回の場合は、5秒だけ待ってStringを返す自作関数sampleFutureFuncを渡しています。
Future<String> sampleFutureFunc() async {
return Future.delayed(new Duration(seconds: 5), () {
return "completed!!";
});
}builderには、表示するwidgetを返す処理を実装します。
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Center(
child: Text(snapshot.data),
);
} else {
return CircularProgressIndicator();
}
}FutureBuilderのポイントはConnectionStateが変わるたびにbuilderが実行されるというところです。
builderはまず初期表示の際に実行されます。
このときはまだ非同期処理の結果が得られていないので、ConnectionStateはdoneではありません。
そのため、CircularProgressIndicator（丸いぐるぐる）が表示されます。
その後、非同期処理が完了したタイミングでもう一度builderが実行されます。
このタイミングではConnectionStateはdoneなので、if文の上のブロックに入り、Text widgetを返します。
関連記事
・FutureBuilderの基本的な使い方と考え方
【Flutter】FutureBuilderの基本とサンプルコード
・ Firebase Authを使ったサンプルコード
[Flutter] FutureBuilderを使って非同期でWidgetを生成する – Qiita
・ http.getを使ったサンプルコード
Async in Flutter – FutureBuilder | Flutter Academy
responseのHTMLをそのまま画面に出すサンプル。
エラー時なども含めて、ConnectionStateの状態による場合分けをしっかり書いているサンプル。
・ いつFutureBuilderを使うべきですか？（英語記事）
Flutter – Future builder: when should I use it – Stack Overflow
質問：
例えば、http通信した後、ListViewで構築すれば、FutureBuilder不要だけど、いつFutureBuilder使えばいいの？
ベストアンサー：
FutureBuilder使わない場合、非同期処理が終わるまでの表示を自分で書かないといけない。非同期処理終了後、setStateを自分で実装しないといけない。
FutureBuilderを使えば、両方書かなくていい。
・Flutter 公式ドキュメント
FutureBuilder class – widgets library – Dart API – Flutter API
・関連書籍
Flutterの基本的な仕組みや周辺知識（テストやCIなど）を網羅的に学べる入門書
Flutter モバイルアプリ開発バイブル
・その他のwidgetについてはこちら
カテゴリ-Flutter
以上、FutureBuilderのサンプルコードでした。
こちらのプログラミング書籍もおすすめ
（若手プログラマー向け、コーディングのレベルが1段階アップ！）
- 特定の言語に限らず、プログラミング初心者で理論から学びたい方におすすめ
- プログラムに不具合が発生する仕組みや原理を理解できます。
- その結果、不具合に強いコードが理解でき、書けるようになります。
- 既存動作を担保しつつ、ソースをリファクタするための方法論を知ることができます。
- テーマはテストですが、コーディングのレベルアップにも大きく役立ちます。
Head First Java 第2版 ―頭とからだで覚えるJavaの基本
- Javaなどのオブジェクト指向プログラミングの初心者におすすめ
- 初心者が躓きやすいポイントをわかりやすく解説（インターフェース、オブジェクト指向、ポリモーフィズムなど）
- コードをシンプルに保つことができるようになる
- ポリモーフィズムを利用した、拡張しやすいプログラムをつくることができるようになる。