Flutterは、非同期処理を簡単に扱えるFutureBuilderというウィジェットを提供しています。このウィジェットを使うと、非同期処理の完了後に、結果をウィジェットに反映させることができます。
FutureBuilderとは？
FutureBuilderは、非同期処理を行い、処理が完了した後に結果をウィジェットに反映させるウィジェットです。Flutterは非同期処理をサポートしており、Future、Streamなどの非同期処理が簡単に扱えます。FutureBuilderは、この非同期処理の結果を反映させるウィジェットとして使用されます。
FutureBuilderの使い方
FutureBuilderを使用するためには、Futureオブジェクトを渡す必要があります。Futureオブジェクトは非同期処理を行い、結果を返します。このFutureオブジェクトをFutureBuilderに渡し、結果を反映するウィジェットを定義します。
以下は、FutureBuilderを使用したサンプルコードです。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
Future<String> getData() async {
// 非同期処理を実行
await Future.delayed(Duration(seconds: 3));
return 'Data Loaded';
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FutureBuilder Example'),
),
body: FutureBuilder<String>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
// ローディング画面を表示
return Center(child: CircularProgressIndicator());
} else {
// 結果を表示
return Center(child: Text(snapshot.data ?? ''));
}
},
),
);
}
}上記の例では、非同期処理を行うgetData()メソッドを定義し、FutureBuilderに渡しています。そして、FutureBuilderのbuilderプロパティで結果を反映するウィジェットを定義しています。
この例では、非同期処理が完了するまでローディング画面を表示し、結果が返ってきたらその結果を表示しています。また、結果がnullの場合は空文字を表示しています。
AsyncSnapshotの状態
AsyncSnapshotには、非同期処理の状態を示すconnectionStateと、結果を示すdataが含まれています。AsyncSnapshotのconnectionStateには、以下の状態があります。
- ConnectionState.none：非同期処理が実行されていない状態
- ConnectionState.waiting：非同期処理が実行されている状態
- ConnectionState.active：非同期処理が実行されているが、結果が返ってきていない状態
- ConnectionState.done：非同期処理が完了し、結果が返ってきた状態
これらの状態に応じて、適切なウィジェットを表示することができます。
エラー処理
FutureBuilderを使用する場合、エラー処理も考慮する必要があります。非同期処理がエラーを返した場合は、エラーを表示するウィジェットを定義する必要があります。
以下は、エラー処理を考慮したサンプルコードです。
Future<String> getData() async {
// 非同期処理を実行
await Future.delayed(Duration(seconds: 3));
// エラーを返す
throw Exception('Failed to load data');
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FutureBuilder Example'),
),
body: FutureBuilder<String>(
future: getData(),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
// ローディング画面を表示
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
// エラー画面を表示
return Center(child: Text(snapshot.error.toString()));
} else {
// 結果を表示
return Center(child: Text(snapshot.data ?? ''));
}
},
),
);
}
}上記の例では、非同期処理がエラーを返した場合にエラー画面を表示するようにしています。AsyncSnapshotのhasErrorプロパティを使用して、エラーが発生したかどうかを判断しています。
まとめ
今回は、FlutterのFutureBuilderの使い方について、ブログ形式で説明しました。FutureBuilderを使用することで、非同期処理の完了後に結果を反映することができます。また、AsyncSnapshotの状態に応じて、適切なウィジェットを表示することができます。エラー処理も考慮し、適切なウィジェットを表示するようにすることで、ユーザーに分かりやすいアプリを作ることができます。