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の動画にも説明がありました。