CODEWITHSUNDEEP
flutterdart
Hasen
Hasen

Reputation: 12346

Flutter for loop to generate list of widgets

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 converted 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.

Upvotes: 105

Views: 194132

Answers (6)

Pedro Mart&#237;n
Pedro Mart&#237;n

Reputation: 156

  @override
  Widget build(BuildContext context) {
    List<int> text = [1, 2, 3, 4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
        // better use SizedBox instead of Container
        child: Column(
          // children: text.map((e) => Text("$e")).toList() // OPTION 1
          children: [...text.map((e) => Text("$e"))],       // OPTION 2 using spread operator
        ),
      ),
    );
  }

Upvotes: 2

Eaweb
Eaweb

Reputation: 987

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

Upvotes: 32

Sahan Amarsha
Sahan Amarsha

Reputation: 2556

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.

Upvotes: 19

Cassio Seffrin
Cassio Seffrin

Reputation: 8610

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());
}

Upvotes: 5

RnDrx
RnDrx

Reputation: 250

The best way to do this is to make use of the List.map()

That way you do not have to enable 'control-flow-collections'

 Container(
        child: Column(
            children: myList.map((e) => new Text(e)).toList(),
          ),
   );

Upvotes: 2

Abbas.M
Abbas.M

Reputation: 3394

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());
          }),
        ),
      ),
    );

Upvotes: 233

Related Questions