如何从StreamBuilder中的其他集合中获取数据

时间:2020-04-18 12:33:29

标签: firebase flutter dart google-cloud-firestore

我遇到了一个问题,但无法解决,我有一个包含用户帖子的“帖子”集合,每个帖子都包含该帖子所有者的uid,还有另一个名为“用户”的集合,并且每个用户都有他的名字和照片,我想获取该用户的名字和图像以显示在他的帖子上。

帖子集 enter image description here

用户集合 enter image description here

我看过这个article,但也许因为我是初学者而没有从中受益。

我的代码:

StreamBuilder(
                  stream: Firestore.instance
                      .collection('Posts')
                      .orderBy('date', descending: true)
                      .snapshots(),
                  builder: (context, snapshot) {
                    if (!snapshot.hasData) {
                      const Text('Loading...');
                    } else {
                      return ListView.builder(
                          physics:
                          NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          scrollDirection: Axis.vertical,
                          itemCount: snapshot
                              .data.documents.length,
                          itemBuilder: (context, index) {
                            DocumentSnapshot mypost =
                            snapshot
                                .data.documents[index];

                            return Stack(
                              children: <Widget>[
                                Container(
                                  decoration:
                                  BoxDecoration(
                                    borderRadius:
                                    BorderRadius
                                        .circular(
                                        15.0),
                                  ),
                                  child: Padding(
                                    padding:
                                    EdgeInsets
                                        .all(8.0),
                                    child: Column(
                                      children: <
                                          Widget>[
                                        InkWell(
                                          child: Row(
                                            children: <
                                                Widget>[
                                              Container(
                                                  width:
                                                  32.0,
                                                  height:
                                                  32.0,
                                                  decoration: BoxDecoration(shape: BoxShape.circle, image: DecorationImage(fit: BoxFit.fill, image: NetworkImage(
                                                    // user image url
                                                      'Owner of post img')))),
                                              SizedBox(
                                                width:
                                                10.0,
                                              ),
                                              Text(
                                                'Owner of post Name',
                                                style: TextStyle(
                                                    color: Colors.white,
                                                    fontSize: 12.0,
                                                    fontWeight: FontWeight.bold,
                                                    fontFamily: 'BalooDa2'),
                                              ),
                                            ],
                                          ),
                                        ),
                                        Padding(
                                          padding:
                                          EdgeInsets.all(
                                              5.0),
                                          child: Text(
                                              '${mypost['text']}',
                                              style: TextStyle(
                                                  color: Colors
                                                      .white,
                                                  fontSize:
                                                  16.0,
                                                  fontFamily:
                                                  'Tajawal',
                                                  height:
                                                  1.3),
                                              textAlign:
                                              TextAlign
                                                  .justify,
                                              textDirection:
                                              TextDirection.rtl),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            );
                          });
                    }
                    return Container(
                      height: 0.0,
                      width: 0.0,
                    );
                  },
                ),

1 个答案:

答案 0 :(得分:1)

您可以使用嵌套的StreamBuilders来从帖子集合中获取的uid获取用户详细信息。我添加了一个查询,该查询将匹配帖子数据中的uid,并在用户集合中查找uid等于帖子中的uid的文档集合。

StreamBuilder(
        stream: Firestore.instance
            .collection('Posts')
            .orderBy('date', descending: true)
            .snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            const Text('Loading...');
          } else {
            return ListView.builder(
                physics:
                NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                itemCount: snapshot
                    .data.documents.length,
                itemBuilder: (context, index) {
                  DocumentSnapshot mypost =
                  snapshot
                      .data.documents[index];

                  return Stack(
                    children: <Widget>[
                      Container(
                        decoration:
                        BoxDecoration(
                          borderRadius:
                          BorderRadius
                              .circular(
                              15.0),
                        ),
                        child: Padding(
                          padding:
                          EdgeInsets
                              .all(8.0),
                          child: Column(
                            children: <
                                Widget>[
                              StreamBuilder(
                                stream: Firestore.instance
                                    .collection('users')
                                    .where('uid', isEqualTo: mypost['uid'])
                                    .snapshots(),
                                builder: (context, snapshot){
                                  switch (snapshot.connectionState) {
                                    case ConnectionState.waiting:
                                      return SizedBox();
                                    case ConnectionState.active:
                                    default:
                                      break;
                                  }
                                  if (snapshot.hasError) print(snapshot.error);
                                  DocumentSnapshot user = snapshot.data.documents[0];

                                  return  InkWell(
                                    child: Row(
                                      children: <
                                          Widget>[
                                        Container(
                                            width:
                                            32.0,
                                            height:
                                            32.0,
                                            decoration: BoxDecoration(shape: BoxShape.circle, image: DecorationImage(fit: BoxFit.fill, image: NetworkImage(
                                              // user image url
                                                '${user['uimg']}')))),
                                        SizedBox(
                                          width:
                                          10.0,
                                        ),
                                        Text(
                                          '${user['name']}',
                                          style: TextStyle(
                                              color: Colors.white,
                                              fontSize: 12.0,
                                              fontWeight: FontWeight.bold,
                                              fontFamily: 'BalooDa2'),
                                        ),
                                      ],
                                    ),
                                  );
                                },

                              ),
                              Padding(
                                padding:
                                EdgeInsets.all(
                                    5.0),
                                child: Text(
                                    '${mypost['text']}',
                                    style: TextStyle(
                                        color: Colors
                                            .white,
                                        fontSize:
                                        16.0,
                                        fontFamily:
                                        'Tajawal',
                                        height:
                                        1.3),
                                    textAlign:
                                    TextAlign
                                        .justify,
                                    textDirection:
                                    TextDirection.rtl),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  );
                });
          }
          return Container(
            height: 0.0,
            width: 0.0,
          );
        },
      ),