Flutter for loop to generate list of widgets

Question

I have code like this but I want it to iterate over an integer array to display a dynamic amount of children:

return Container(
  child: Column(
    children: <Widget>[
      Center(
        child: Text(text[0].toString(),
            textAlign: TextAlign.center),
      ),
      Center(
        child: Text(text[1].toString(),
            textAlign: TextAlign.center),
      ),
    ],
  ),
)

Where the text variable is a list of integers converter to string here. I tried adding a function to iterate through the array and display the 'children' but was getting a type error. Not sure how to do it since I'm new to Dart and Flutter.

Answer 1

You can try this :

@override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: [
            for ( var i in text ) Text(i.toString())
          ],
        ),
      ),
    );

Note that this was added with the updated of dart to version 2.3. You can read about some of the best changes in this article

Another method that was provided before dart 2.3 is this:

@override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: List.generate(text.length,(index){
            return Text(text[index].toString());
          }),
        ),
      ),
    );

Answer 2

You can try .map Method here,

class Example extends StatelessWidget {

  List <int> exampleList =  [1,2,3,4];

  @override
  Widget build(BuildContext context) {
    return
      Container(
        child: Column(
            children: exampleList.map((i) => new Text(i.toString())).toList()
        ),
      );
  }
}

This method will come in handy if you have objects inside your list. Also with the .map() method .toList() must be used at the end.

Answer 3

Assuming you want to loop some widgets (e.g Text()) in the Column widget, you can add a loop inside the children property. See a sample below:

Column(
   children: <Widget>[
      for (int i=0; i<3; i++)
         Text("Hello" + i)
   ],
)

Answer 4

You could use the map method of your list of Strings.

 Widget _getListWidgets(List<String> yourList){
    return Row(children: yourList.map((i) => Text(i)).toList());
  }

When your List have a complex Object:

Widget _getListWidgets( List<YourObject> lstItens) {
  return Row(children: lstItens.map((i) => Text(i.name)).toList());
}