how to set the array list in a listview builder in flutter?

Question

I have array fetched from firestore database successfully, for which I am trying to build a list for array using ListView.builder but not able to do so.

here is the array list I have

[{step: ffg}, {step: fgsgg}, {step: fgfda}]

code for list view builder

                   Expanded(
                              child: ListView.builder(
                                itemCount: widget.steps.length,
                                itemBuilder: (context, index) => Container(
                                  
                                  child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                      
                                      Text(
                                        //"STEPS ${index + 1}",
                                        "${widget.steps}",
                                        

                                    ],
                                  ),
                                ),
                              ),
                            ),

Here is the screenshot of the result I am getting

I want the list of array fetched in a serialized manner index wise. How am I suppose to achive it? This is how I want the list to be displayed

1. ffg
2. fgsgg
3. fgfda

Answer 1

You can do it like this using a Column ..

Column(
      children: widget.steps.map((item){
        return Text('${item['step']}');
      }).toList(),
    )

..or using a ListView.builder like this..

ListView.builder(
      itemCount: widget.steps.length,
      itemBuilder: (BuildContext context, int index){
        return Text('${widget.steps[index]['step']}');
      },
    )

Answer 2

You need to reference an index within the array in the builder. widget.steps is using the default toString method of List to put convert it to a String .

And if you want to not use the default toString of Map (which is what is contained at each List reference), reference the Map item you want to show as well.

Both reference operators for these object are []

Expanded(
  child: ListView.builder(
    itemCount: widget.steps.length,
    itemBuilder: (context, index) => Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            "${widget.steps[index]['step']}",//Reference an index & key here. This is why index is provided as a parameter in this callback
        ],
      ),
    ),
  ),
),

Answer 3

Just use

Text( "${widget.steps[index]['step']}",)
                                        

                           

Answer 4

From your response widget.steps is a List of type Map so to get what's inside the list:

1. you have to define the index number
2. select the key to get its value

Try this: Text("${widget.steps[index][step]}")