DEV Community

loading...

How to display List of Followers or Following in your Image sharing app(Flutter)

ug2454 profile image Uday ・2 min read

Title

So in todays post, i will tell you about how to display the list of users who are following you and list of users you are following.

Pre Requisite

Pre-requisite for this is that you already have a basic structure and code of the image sharing app like Instagram.

So now you are on your profile page and you want to view all your follower and following list. So to do that, provided you have a 'follower' and 'following' collection setup in firebase, you have to Fetch all the documents of the particular Profile which you are cliking and then use that id as a doc id for the 'user' collection. So first, fetch all the records of 'Follower' colection for that id using QuerySnapshot

the code for it will be:

QuerySnapshot querySnapshot = await followersRef
        .doc(widget.profileId) // the id of profile you are cliking
        .collection('userFollowers')
        .get();

Enter fullscreen mode Exit fullscreen mode

add all the records in a List of string, using a map and then converting it into a list, like this:

followers = querySnapshot.docs.map((doc) => doc.id).toList();
Enter fullscreen mode Exit fullscreen mode

And now implement a FutureBuilder or StreamBuilder of type <QuerySnapshot> whatever is your choice and then in the future or stream , give the 'user' collection reference.
Then using snapshot, loop through all the user records and add only those in a new List which contains id in the followers list(defined earlier).

so,

if(followers.contains(user.id)){
// add that user to the List else return from the loop
}
else return;
Enter fullscreen mode Exit fullscreen mode

Then using the new List, pass it to the ListView which you will return in the FutureBuilder or StreamBuilder.

Thats it to show the follower list, and same thing has to be done to show the following list. Just in place of 'follower' collection, get the records from 'following' collection.

Thats it! thats all you have to do to show all the users in your Follower or Following section. :D

Discussion

pic
Editor guide