How to iterate over list to incorporate it in a wrap widget?

Question

I am trying to restrict the items(Containers) in the Row to 8 and if there are more items, they should be wrapped. I have a list of Containers but I can not use listView as children of Wrap since listView scrolls. Is there any way to get this layout fixed?

• I have tried using for loop but as it hits return for the first time, it gets out of loop.

• I have tried gridView instead of wrap but it doesn't give me the result as gridView is scrollable.

             Expanded(
                    flex: 4,
                    child: Wrap(
                      direction: Axis.horizontal,
                      spacing: 0.5,
                      runSpacing: 0.5,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      children: <Widget>[
// I want something that works like following line                        
                     //Container(child: kids1)

//currently I can get results with following code

                        kids1[1],
                        kids1[2],
                        kids1[3], kids1[4], kids1[5], kids1[6], 
                        kids1[7], kids1[8], kids1[9], kids1[10], 
                        kids1[11]

                      ],
                    ),
                  ),

kids is a list of Containers

Answer 1

Why don't you create the list of children before the return of the build function :

@override
Widget build(BuildContext context) {

 List<Widget> children = List.generate(myContainerList.length, (e) => myContainerList[e]);

 return Wrap(
   children: children,
 );
}