【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part106 Async
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part106 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part105 Interaction model widgets
今回からAsyncについて学びます。
FutureBuilderウィジェット
FutureBuilder
ウィジェットはDart言語の非同期処理であるFuture
クラスをUIで扱うためのウィジェットです。
Future関連記事
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part29 Single-child layout widgets
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part30 Single-child layout widgets
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part31 Single-child layout widgets
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part32 Single-child layout widgets
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part33 Single-child layout widgets
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part34 Single-child layout widgets
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part39 Multi-child layout widgets
概要
FutureBuilder
ウィジェットのfuture
プロパティにFuture
オブジェクトを指定します。
本書では以下のように説明があります。
一度、
builer
プロパティの関数が呼ばれ、非同期処理が終わったら、再度、呼ばれます。
ということはbuilder
プロパティに指定された処理は以下の2つの場面で実行されるということのようです。
- 一番初め
- 非同期処理終了
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
// runApp(new MaterialApp(home: new MyApp()));
runApp(new MaterialApp(home: new SamplePage()));
}
class SamplePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _SampleAsyncState();
}
}
class _SampleAsyncState extends State<SamplePage> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('テスト中!')),
body: FutureBuilder(
future: Repository().fetch(),
builder: (context, snapshot) {
// エラーの場合です。
if (snapshot.hasError) {
return Text('エラー');
}
// データがEmptyの場合です。
if (!snapshot.hasData) {
return Text('Empty');
}
return Text('${snapshot.data}');
},
),
),
);
}
}
class Repository {
Future<int> fetch() {
return Future.delayed(Duration(seconds: 3)).then((value) => 1);
// return Future.delayed(Duration(seconds: 1)).then((_) {
// return 1;
// });
}
}
初回はfuture
の処理が行われていないのでEmptyが表示されています。
future
の処理が終わった段階で結果である1が画面に表示されるようになっています。
最後に
サンプルでは少しわかりにくいですね😅
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません