Listing widgets (chips) that have different width, in a container

Question

I'm trying to make a container with a list of element like shown in the picture below.

I used gridView.builder to make it responsive so the elements will be next to each other and in case there's no space it will return to next line.

But the problem here is with GridView.builder the elements will all have the same fixed width, thus in my case I need the elements to have variable width (example: pickup and delivery service has a bigger width because the text is longer)

Answer 1

Use the Wrap widget instead. See official docs:

https://api.flutter.dev/flutter/widgets/Wrap-class.html

As the video explains on the link above, it works really well with Chips, as you have in your picture.

Answer 2

For this you can use Wrap with action chip, below is example you can refer

        Wrap(
          spacing: 10,
          runSpacing: 10,
          children: services
              .map(
                (data) => ActionChip(
                  label: Text(
                    data,
                  ),
                  padding: EdgeInsets.all(5),
                  elevation: 5,
                  backgroundColor: Colors.white,
                  disabledColor: Colors.white,
                  onPressed: () {},
                ),
              )
              .toList(),
        ),