How can I use nested loop for widget?-CodePudding

I understand I can code like single loop to build widget like;

final icon =["lock.png","map.png","stake.png","cheer.png","sushi.png"];
// omit
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
        for(int i = 0; i < icon.length; i  ) ... {
          selectIcon(id: 1, iconPass: icon[i]),
        },
  ],
),

But when those widgets structured as nested like:

final icon =["lock.png","map.png","stake.png","cheer.png","sushi.png","drink.png","toy.png","christmas.png","newyear.png","flag.png")];
//omit,
child: Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        selectIcon(id: 1, iconPass: "lock.png"),
        selectIcon(id: 1, iconPass: "map.png"),
        selectIcon(id: 1, iconPass: "sushi.png"),
        selectIcon(id: 1, iconPass: "stake.png"),
        selectIcon(id: 1, iconPass: "cheer.png"),
      ],
    ),
    Container(
      margin: const EdgeInsets.only(top:10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          selectIcon(id: 1, iconPass: "drink.png"),
          selectIcon(id: 1, iconPass: "toy.png"),
          selectIcon(id: 1, iconPass: "christmas.png"),
          selectIcon(id: 1, iconPass: "newyear.png"),
          selectIcon(id: 1, iconPass: "flag.png"),
        ],
      ),
    ),
  ]
);

How can I build with nested widget with loop in flutter / Dart ? or is it unacceptable ?

CodePudding user response：

You can use collection package to split your icon into lists that have 5 items in them like this:

class _CustomTitleWidgetState extends State<CustomTitleWidget> {
  final icon = [
    "lock.png",
    "map.png",
    "stake.png",
    "cheer.png",
    "sushi.png",
    "drink.png",
    "toy.png",
    "christmas.png",
    "newyear.png",
    "flag.png"
  ];

  Widget selectIcon({required int id, required String iconPass}) {
    return Container(
      child: Text(iconPass),
    );
  }

  @override
  Widget build(BuildContext context) {
    var iconChunks = icon.slices(5).toList();

    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: Column(
          children: iconChunks
              .map((e) => Padding(
                    padding: const EdgeInsets.only(bottom: 10.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children:
                          e.map((e) => selectIcon(id: 1, iconPass: e)).toList(),
                    ),
                  ))
              .toList()),
    );
  }
}

CodePudding user response：

You can try to use List.generate to generate a list of widgets.

final icon = [
  "lock.png",
  "map.png",
  "stake.png",
  "cheer.png",
  "sushi.png"
];

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: List.generate(
    icon.length,
    (i) => selectedIcon(
      id: 1,
      iconPass: icon[i]
    )
  )
);

CodePudding user response：

Here's a way to do it dynamically, and works with an item list of any size. It will group your items in groups of 5

    Column(
        children: [
          for(int i = 0; i < icon.length / 5; i  )
            if (i == 0)
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  for (int j = 5 * i; j < min(icon.length, 5 * i   5); j  ) selectIcon(id: 1, iconPass: icon[j])
                ],
              )
            else
              Container(
                margin: const EdgeInsets.only(top:10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    for (int j = 5 * i; j < min(icon.length, 5 * i   5); j  ) selectIcon(id: 1, iconPass: icon[j])
                  ],
                ),
              ),
        ]
    )