How do I setup a scoreboard in flutter? (using firebase)

Question

Hi I'm having trouble setting up my scoreboard in flutter, everything is working as intended except one part. I want to create a scoreboard which displays a username, image and some data. All the data is stored in a collection in firebase and I have set it up as following.

date "2022-05-12"

time 20220512

träning "data"

userID "x"

I would like to get the username and the image from another collection where I've saved the user info. The user documents looks like this and they are named after the userID.

name "x"

imagePath "x"

My original idea was to get the data and the userID and then use the userID to get the name and image. This is my current code. Im getting the correct userID but I cant figure out how to get the name and the image from the user documents. Does anyone know how I could solve this? I'll add an example screenshot at the end. Thanks for reading.

StreamBuilder<QuerySnapshot<Object?>> buildStreamBuilderTop() {
return StreamBuilder<QuerySnapshot>(
  stream: trViewTop,
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
    if (snapshot.hasError) {
      return Text('Nått gick snett');
    }
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Text('Datan hämtas');
    }
    final data = snapshot.requireData;
    return AnimationLimiter(
      child: ListView.builder(
            itemCount: data.size,
            itemBuilder: (context, index) {
              QueryDocumentSnapshot user = snapshot.data!.docs[index];
              String userID = user['userID'];

              return AnimationConfiguration.staggeredList(
                position: index,
                duration: const Duration(seconds: 1),

                child: SlideAnimation(
                  verticalOffset: 44,

                  child: FadeInAnimation(
                    child: Card(
                      child: ListTile(

                        leading: CircleAvatar(radius: 30, backgroundImage: NetworkImage(*this is where i want the image*)),
                        title: Text(*this is where i want the name*),
                        subtitle: Text('Träningar ${data.docs[index]['totalTr']}'),
                        trailing: Text(' + ${data.docs[index]['totalTr'] * 20 } Kr',
                          style: TextStyle(color: Colors.green),),
                      ),
                    ),
                  ),
                ),
              );
            }
      ),
    );
  },
);

}