Search code examples
flutterdartgoogle-cloud-firestorestream-builderflutter-listview

Flutter, how can I retrieve user info and display it on specific blog posts from firestore?


I'm new to dart and flutter comming from java(android). I have a list of posts, which are posted by different users. I want to display user name and user image for each post. The problem is I'm storing users in a "Users" collection and posts in a "Posts" collection. I have user id attached to each post and I can pull it(the id) together with the post details. But I can't use it(the id) to display profile info. Please help, some lines of code to give me some light will be much appreciated. Bellow is my code to display the posts:

body: StreamBuilder(
        stream: Firestore.instance.collection('Posts').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            const Text('Loading...');
          } else {
            return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                DocumentSnapshot myPosts = snapshot.data.documents[index];

                return Container(
                  width: MediaQuery.of(context).size.width,
                  //height: 350,
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 8.0),
                    child: Center(
                      child: Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                CircleAvatar(
                                  radius: 20.0,
                                  backgroundColor: Colors.blueGrey,
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(left: 8.0),
                                  child: Container(
                                    color: Colors.black45,
                                    height: 30,
                                    width: 2,
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(left: 8.0),
                                  child: Column(
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text(
                                        'user name',
                                        style: TextStyle(
                                          fontSize: 16.0,
                                          fontWeight: FontWeight.bold,
                                          color: Colors.black54,
                                        ),
                                        overflow: TextOverflow.ellipsis,
                                      ),
                                      Text(
                                        'user status',
                                        style: TextStyle(
                                          color: Colors.grey,
                                          fontSize: 14.0,
                                        ),
                                      )
                                    ],
                                  ),
                                )
                              ],
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            Container(
                              width: MediaQuery.of(context).size.width,
                              //height: 200.0,
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(8.0),
                                child: AspectRatio(
                                  aspectRatio: 16 / 9,
                                  child: FadeInImage.assetNetwork(
                                    width: MediaQuery.of(context).size.width,
                                    placeholder: 'assets/images/loading.jpg',
                                    image: '${myPosts['post_image']}',
                                    fit: BoxFit.fill,
                                  ),
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Flexible(
                                  child: Padding(
                                    padding: const EdgeInsets.only(right: 8.0),
                                    child: Text(
                                      '${myPosts['post_title']}',
                                      style: TextStyle(
                                        fontSize: 18.0,
                                        fontWeight: FontWeight.bold,
                                        color: Colors.black87,
                                      ),
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                    ),
                                  ),
                                ),
                                FlatButton(
                                  child: Text(
                                    'Download Pdf',
                                    style: TextStyle(
                                      fontSize: 14.0,
                                      color: Colors.black54,
                                    ),
                                  ),
                                  shape: OutlineInputBorder(
                                    borderSide: BorderSide(
                                        color: Colors.black54, width: 1),
                                    borderRadius: BorderRadius.circular(5),
                                  ),
                                  padding: const EdgeInsets.fromLTRB(
                                    15.0,
                                    4.0,
                                    15.0,
                                    4.0,
                                  ),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            Text(
                              '${myPosts['post_body']}',
                              style: TextStyle(
                                fontSize: 16.0,
                              ),
                              overflow: TextOverflow.ellipsis,
                              maxLines: 8,
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: <Widget>[
                                Text(
                                    'Posted ' +
                                        TimeAgo.getTimeAgo(
                                            myPosts['post_time']),
                                    style: TextStyle(color: Colors.grey)),
                                Text(
                                    '${myPosts['comments_count']} Comment(s)',
                                    style: TextStyle(color: Colors.grey)),
                              ],
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              },
            );
          }
          return Loading();
        },
      ),

Everything works fine, the problem is just to pull the user info. I have a class that I use to display user data on the profile page if it might be useful in this case here is the code of it below

import 'package:cloud_firestore/cloud_firestore.dart';

class ProfileService {
  getProfileInfo(String uid) {
    return Firestore.instance
        .collection('Users')
        .where('user_id', isEqualTo: uid)
        .getDocuments();
  }
}

Your help will be much appreciated I'm stuck.


Solution

  • try using this :

    Future<DocumentSnapshot> _getDocument(String uid) async {
     return await Firestore().collection('Users').where('user_id', isEqualTo: uid).get();
    }
    

    it will return u document snapshot which then u can use to get user information