I have an array of items inside a list from firebase. I want to display those array elements inside my flutter app but I have failed

Question

Inside of my firebase collection (which is a list elements) I have arrays as well. I am failing to display the elements inside the array in my flutter app.

Here is how the data is inside my firebase document;

cooking_time
"No cooking"
description
"Add a taste of the tropical to your breakfast with our easy vegan, mango and pineapple smoothie bowl"
id
"wjDeHCE97TSDyqBDggGY"
image
"https://firebasestorage.googleapis.com/v0/b/seddi-89190.appspot.com/o/tropical-smoothie-bowl.jpg?alt=media&token=5985e156-36cc-4d46-9f57-b12d5a6deb50"
ingredients
0
"1 small ripe mango , stoned, peeled and cut into chunks"
1
"200g pineapple , peeled, cored and cut into chunks"
2
"2 ripe bananas"
3
"2 tbsp coconut yogurt (not coconut-flavoured yogurt)"
4
"150ml coconut drinking milk"
5
"2 passion fruits , halved, seeds scooped out"
6
"handful blueberries"
7
"2 tbsp coconut flakes"
8
"a few mint leaves"
method
0
"STEP 1: Put the mango, pineapple, bananas, yogurt and coconut milk in a blender, and blitz until smooth and thick. Pour into two bowls and decorate with the passion fruit, blueberries, coconut flakes and mint leaves. Will keep in the fridge for 1 day. Add the toppings just before serving."
name
"Tropical smoothie bowl"
prep_time
"20 mins"
price
"34000"
serves
"2"
tags
0
"Smoothie"
1
"Healthy"
2
"breakfast"

Below is my code that tries to display each item inside the "tags" array; Please look at the "subtitle" part of the ListTile.

ListTile(
          onTap: () {},
          hoverColor: Colors.red,
          leading: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.network(
              document['image'],
              fit: BoxFit.cover,
            ),
          ),
          title: CustomText(
            text: document['name'],
            weight: FontWeight.bold,
          ),
          subtitle: Row(
            children: document['tags'].map((cat) => Text(cat)).toList(),
          ),
          trailing: Text('Ush.${document['price']}')),

Below is the error;

The following _TypeError was thrown building:
type 'List<dynamic>' is not a subtype of type 'String'

Answer 1

Try this:

Row(
children: [ for (var cat in document['tags']) Text(cat.toString()) ])

Answer 2

 final Stream<QuerySnapshot> _usersStream = FirebaseFirestore.instance
  .collection('users')
  .where('userUid', isEqualTo: FirebaseAuth.instance.currentUser!.uid)
  .snapshots();
StreamBuilder<QuerySnapshot>(
                      stream: _usersStream,
                      builder: (BuildContext context,
                          AsyncSnapshot<QuerySnapshot> snapshot) {
                        if (snapshot.hasError) {
                          return Text('Something went wrong');
                        }

                        if (snapshot.connectionState ==
                            ConnectionState.waiting) {
                          return Text("Loading");
                        }

                        final data = snapshot.requireData;
                        return Container(
                          height: 250,
                          width: kwidth - 100,
                          child: ListView.builder(
                            itemCount: data.size,
                            itemBuilder: (context, index) {
                              List<String> extraa = List.from(
                                  snapshot.data!.docs[index]['address']);
                              return ListView(
                                shrinkWrap: true,
                                scrollDirection: Axis.vertical,
                                padding: EdgeInsets.all(8),
                                children: extraa
                                    .map(
                                      (ingredient) => Card(
                                        color: Colors.black54,
                                        child: Center(
                                          child: Text(
                                            ingredient,
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 16),
                                          ),
                                        ),
                                      ),
                                    )
                                    .toList(),
                              );
                            },
                          ),
                        );
                      },
                    ),