How to use For Loop to generate list of widgets in Flutter?

When creating a flutter application sometimes users need to generate widget lists dynamically or we can say that where the size of data is not fixed. So in this article, we will walk through how to use For Loop to generate a list of widgets in Flutter?

Are you ready for it?

How to use For Loop to generate a list of Widgets in Flutter?

Generally, this kind of list is used where we are not sure of the size of data or we can say that based on the dynamical size of a widget.

Suppose a user is having a list like the below:

Consider a code snippet like the below:

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

Another method that was provided before dart 2.3 is this:

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

You can try the .map method like below:

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.

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 has a complex Object:

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

Example:

@override
class GenerateListWidget extends StatelessWidget {
  const GenerateListWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List text = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    return Scaffold(
      appBar: AppBar(
        title: const Text("Generate List"),
      ),
      body: Column(
        children: List.generate(text.length, (index) {
          return Text(
            text[index].toString(),
            style: const TextStyle(fontSize: 22),
          );
        }),
      ),
    );
  }
}

Output:

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, we have learned about How to use For Loop to generate a list of widgets in Flutter?

Do you have any flutter requirements for us? Drop us a requirement.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. Here we upload amazing pieces of stuff daily about Flutter updates, news, and Flutter widgets.