虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterで非同期でWidgetを生成する

f:id:superman199323:20181105094627j:plain

Flutterで非同期でWidgetを生成する

Flutterで非同期でWidgetを表示する方法について書く。

Futureを返すメソッドは asStreamにして StreamBuilderを使って表示する

非同期でデータを取得して取得完了後に画面にデータを表示するにはメソッドをasStreamにしてStreamBuilderに使って表示する

例えばこんなコード。 これはローカルからデータを取得してサーバーのデータと比較して差分の数を表示するコード。

Future<int>   getUnRead(
      List<DocumentSnapshot> documentIdList, String groupId) async {
    var dbHelper = MessageDbHelper();

    int count = 0;
    for (int i = 0; i < documentIdList.length - 1; i++) {
      var message = documentIdList[i];
      var localMessage = await dbHelper.getGroupMessage(message.documentID, groupId);
      if (localMessage == null) {
        count++;
      }
    }

    return count;
  }

このデータを取得完了後に画面に反映する場合はこうする

StreamBuilder(
                            stream: helper.getMessageList(data.documentID),
                            builder: (context, snapshot) {
                              if (snapshot == null || snapshot.data == null)
                                return Container();

                              var messageIdList = snapshot.data.documents;
                              var groupId = data.documentID;

                              return StreamBuilder(
                                stream: _unReadNum(messageIdList, groupId).asStream(),
                                builder: (_, snapshot) {
                                  if (snapshot == null || snapshot.data == null) return Container();
                                  return snapshot.data;
                                },
                              );
                            }
                          ),

Futureを返すメソッドに対して asStream にして StreamBuilder として返せばいい。 そうするとデータ取得完了後に builderの中のメソッドが呼ばれWidgetを生成できる。

前に書いたチャットを作成する方法にも同じことをやっている。

note.mu