Question 74898 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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)

picture-1-

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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(),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search