Iterating through a list to render multiple widgets in Flutter

Question

I have a list of strings defined like this   var list     one    two    three    four       I want to render the values on the screen side by side using text widgets  I have attempted to use the following code to attempt this   for  var name in list       return new Text name       However  when I run this code  the for loop only runs once and there is only one text widget that get rendered which says one  the first item in the list   Additionally  when I add a log message inside my for loop  it gets triggered once as well  Why isn t my for loop looping based on the length of the list  It seems to run only once and then quit

User · Answer

All you need to do is put it in a list and then add it as the children of the widget.

you can do something like this:

Widget listOfWidgets(List<String> item) {
  List<Widget> list = List<Widget>();
  for (var i = 0; i < item.length; i++) {
    list.add(Container(
        child: FittedBox(
          fit: BoxFit.fitWidth,
          child: Text(
            item[i],
          ),
        )));
  }
  return Wrap(
      spacing: 5.0, // gap between adjacent chips
      runSpacing: 2.0, // gap between lines
      children: list);
}

After that call like this

child: Row(children: <Widget>[
   listOfWidgets(itemList),
])

User · Answer

For googler  I wrote a simple Stateless Widget containing 3 method mentioned in this SO  Hope this make it easier to understand   import  package flutter material dart    class ListAndFP extends StatelessWidget     final List lt String gt  items     apple    banana    orange    lemon           for in  require dart 2 2 2 SDK or later    Widget method1         return Column        children   lt Widget gt           Text  You can put other Widgets here            for  var item in items  Text item                             map     toList     Spread Property   Widget method2         return Column        children   lt Widget gt           Text  You can put other Widgets here               items map  item    gt  Text item   toList                              map     toList     Widget method3         return Column           Text  You CANNOT put other Widgets here          children  items map  item    gt  Text item   toList                   override   Widget build BuildContext context        return Scaffold        body  method1

User · Answer

when you return some thing  the code exits out of the loop with what ever you are returning so  in your code  in the first iteration  name is  one   so  as soon as it reaches return new Text name   code exits the loop with return new Text  one    so  try to print it or use asynchronous returns

User · Answer

It is now possible to achieve that in Flutter 1 5 and Dart 2 3 by using a for element in your collection      var list     one    two    three    four      child  Column            mainAxisAlignment  MainAxisAlignment center            children   lt Widget gt                for var item in list   Text item                                This will display four Text widgets containing the items in the list  NB  No braces around the for loop and no return keyword

User · Answer

You can use ListView to render a list of items  But if you don t want to use ListView  you can create a method which returns a list of Widgets  Texts in your case  like below   var list     one    two    three    four          override     Widget build BuildContext context          return new MaterialApp            home  new Scaffold          appBar  new AppBar            title  new Text  List Test                       body  new Center            child  new Column     Or Row or whatever                children  createChildrenTexts                                                  List lt Text gt  createChildrenTexts             Method 1       List lt Text gt  childrenTexts   List lt Text gt           for  String name in list            childrenTexts add new Text name  style  new TextStyle color  Colors red                    return childrenTexts           Method 2     return list map  text    gt  Text text  style  TextStyle color  Colors blue     toList

User · Answer

The Dart language has aspects of functional programming  so what you want can be written concisely as   List lt String gt  list     one    two    three    four    List lt Widget gt  widgets   list map  name    gt  new Text name   toList      Read this as  take each name in list and map it to a Text and form them back into a List

User · Answer

Basically when you hit  return  on a function the function will stop and will not continue your iteration  so what you need to do is put it all on a list and then add it as a children of a widget  you can do something like this     Widget getTextWidgets List lt String gt  strings          List lt Widget gt  list   new List lt Widget gt         for var i   0  i  lt  strings length  i             list add new Text strings i               return new Row children  list         or even better  you can use  map   operator and do something like this     Widget getTextWidgets List lt String gt  strings          return new Row children  strings map  item    gt  new Text item   toList

[dart] Iterating through a list to render multiple widgets in Flutter?

Examples related to dart

Examples related to flutter