Flutter FutureBuilder と StreamBuilder

Future

  • 非同期処理
  • 値を取得すると処理が終了

Stream

  • 非同期処理
  • ストリームが開いている間、ずっと値が流れてくる
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var controller = StreamController<int>();
var stream = controller.stream;

// ストリームを listen() しておくと、そのデータを受け取れる
var subscription = stream.listen((data) => print('listen=$data'),
onError: (error) {
//エラー処理
},
cancelOnError: false,
onDone: () {
//完了時に呼ばれる
});

// ストリームにデータを流す
controller.sink.add(1);

// 1秒待機
await Future.delayed(Duration(second: 1));

// ストリームを閉じる
subscription.cancel();
controller.close();

FutureBuilder

  • FutureクラスをUIで扱うためのウィジェット
    • future に、終了を待ちたい非同期処理を指定
    • builder に、その結果を受けてWidget生成する処理を指定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
FutureBuilder(
future: Repository().fetch(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snaphost.hasError) {
return // エラー表示のウィジェットを記述
}
if (!snapshot.hasData) {
return // データ無し表示のウィジェットを記述
}
// データ表示
return Text('${snapshot.data}');
} else {
// 処理中の表示
return const CircularProgressIndicator();
}
},
),
1
2
3
4
5
6
7
class Repository {
Future<int> fetch() {
return Future.delayed(Duration(second: 1).then((_) {
return 1;
});
}
}
1
2
3
4
5
6
7
8
9
10
child: Column(
children: [
FutureBuilder<PackageInfo>(
future: PackageInfo.fromPlatform(),
builder: (context, snapshot) {
return Text('Ver. ${snapshot.data?.version ?? '-'}');
},
),
]
)

StreamBuilder

  • StreamクラスをUIで扱うためのウィジェット
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
StreamBuilder<int> (
stream: logic.value,
builder: (context, snapshot) {
if (snaphost.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return ErrorWidget(snapshot.error);
}
if (!snapshot.hasData) {
retrun Container();
}
return Text('${snapshot.data}');
} else {
return const CirculearProgressIndicator();
}
},
),

コメント

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×