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 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
        ],
      ),
    ),
  ),
),