Flutterで非同期でWidgetを生成する
いつも別のブログに書いていましたが、これからNoteに自分の知見を書いていこうと思います。
以前のブログはこちら。
Widgetを自動生成する
例えば、Widgetを表示するが非同期でデータを取得して取得できた瞬間に画面に表示するみたいな実装はFutreBuilderを使用します。
例えば下記の実装ではユーザー情報を非同期で取得し、その結果を画面に表示しています。
Widget _userImage(DocumentSnapshot data) {
return FutureBuilder(
// future属性で非同期処理を書く
future: chatHelper.getUserInfo(data.data["uid"]),
builder: (context, snapshot) {
// 取得完了するまで別のWidgetを表示する
if (!snapshot.hasData)
return CircleAvatar(
backgroundImage: AssetImage("assets/defaultImage.png"),
);
// 取得できたらそれにしたがってViewを表示する
return CircleAvatar(
backgroundImage: snapshot.data["profile_url"] == null
? AssetImage("assets/defaultImage.png")
: NetworkImage(snapshot.data["profile_url"]),
);
},
);
}
実際の非同期処理はこちらです。ここでポイントになることは戻り値をFutureにすることです。この例ではFirestoreにデータを取得しています。
Future<DocumentSnapshot> getUserInfo(String uid) {
return Firestore.instance.collection("user").document(uid).get();
}
この処理はYouTubeの動画にも説明がありました。
投げ銭はいりません。それより無料でできる拡散をしてください!! 感想をツイートしていただけることが一番嬉しいです!!