Can I do this design in Flutter?

Question

Can I do this

Design in Flutter. The point is that the number of buttons in a row depends on the size of buttons, so the crossAxisCount is not fix. I don't know how to put a button in the next row if there is not enough space.

Container(
                          color: Colors.red,
                          width: appWidth * 0.8,
                          child: Row(
                            children: [
                              for (var i in provider.getFilterButtons)
                                Row(
                                  children: [
                                    SizedBox(
                                      height: appHeight * 0.05,
                                      child: OutlinedButton(
                                        onPressed: () {},
                                        child: Row(
                                          children: [
                                            Text(
                                              '${i.name}: ${i.value}',
                                              style: TextStyle(
                                                  fontSize: appHeight * 0.021),
                                            ),
                                            IconButton(
                                              padding: EdgeInsets.zero,
                                              constraints:
                                                  const BoxConstraints(),
                                              onPressed: () {},
                                              iconSize: appHeight * 0.02,
                                              icon: const Icon(
                                                Icons.close,
                                                color: Colors.black,
                                              ),
                                            )
                                          ],
                                        ),
                                        style: OutlinedButton.styleFrom(
                                          onSurface: Colors.red,
                                          side: const BorderSide(
                                            color: AppColors.lightPurple,
                                          ),
                                        ),
                                      ),
                                    ),
                                    SizedBox(width: appWidth * 0.02),
                                  ],
                                ),
                            ],
                          ),
                        )

Answer 1

Check below code it will help you,

class CustomTag extends StatefulWidget {
  const CustomTag({Key key}) : super(key: key);

  @override
  _CustomTagState createState() => _CustomTagState();
}

class _CustomTagState extends State<CustomTag> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: [
              tag(name: "Name: iPad"),
              tag(name: "Name: iPad 1"),
              tag(name: "Name: iPad 2"),
              tag(name: "Name: iPad Mob 3"),
              tag(name: "iPad 4"),
              tag(name: "Name: iPad"),
              tag(name: "Name: iPad 6"),
            ],
          ),
        ),
      ),
    );
  }

  Widget tag({String name}) {
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        border: Border.all(color: Colors.purple),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            name ?? "",
            style: TextStyle(color: Colors.purple),
          ),
          Icon(
            Icons.close,
            size: 16.0,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

Answer 2

Instead of using row to display those items generated by for loops. You can use Wrap.

Container(
    color: Colors.red,
    width: appWidth * 0.8,
    child: Wrap(
        children: [
            for (var i in provider.getFilterButtons)
                Row(

Answer 3

Thank you very much, it worked like a charm.