How to increase width of ChoiceChip to same value for all?

Question

I am using https://api.flutter.dev/flutter/material/ChoiceChip-class.html and I want to make them same size.

I found out this solution How to increase the width of a chip in flutter but padding is not solution because then width depends on text size so I am getting different width for every ChoiceChip.

I also tried with wrapping it with Container but this also didnt work for me.

ChoiceChip(
     label: AutoSizeText(local.searchNoLocation),
     selected: helperSelected == 3,
     selectedColor: Color(0xffffcfcf),
     labelStyle: TextStyle(
        color: helperSelected == 3 ? Colors.red[300] : Colors.black),
     onSelected: (_) {
        setState(() => helperSelected = 3);
     })

did you try to give "width" to container? Container(width:100,child:ChoiceChip(...... — Kasım Onuk, Feb 16 '22 at 13:56

Omar Alshyokh · Accepted Answer · 2022-02-16T14:08:25.137

Just wrap the label property with any widget that you can control with its width and height like Container or SizedBox

  ChoiceChip(
            label: Container(
                width: 50,
                child: Text("searchNoLocation",overflow: TextOverflow.ellipsis,)),
            selected: helperSelected == 3,
            selectedColor: Color(0xffffcfcf),
            labelStyle: TextStyle(
                color: helperSelected == 3 ? Colors.red[300] : Colors.black),
            onSelected: (_) {
              setState(() => helperSelected = 3);
            }),
        ChoiceChip(
            label: Container(
                width: 250,
                height: 40,
                alignment: AlignmentDirectional.center,
                child: Text("searchNoLocation",overflow: TextOverflow.ellipsis,)),
            selected: helperSelected == 3,
            selectedColor: Color(0xffffcfcf),
            labelStyle: [![TextStyle][1]][1](
                color: helperSelected == 3 ? Colors.red[300] : Colors.black),
            onSelected: (_) {
              setState(() => helperSelected = 3);
            }),

score 0 · Answer 2 · answered Feb 16 '22 at 13:55

For making them actually the same size you need the label to have the same size. If you want them inside a Row or Column and using the same amount of space in the mainAxis, you can wrap them inside an Expanded widget.

Row(
  children: const [
    Expanded(
      child: ChoiceChip(
        selected: false,
        label: Text('Bigger Text'),
      ),
    ),
    Expanded(
      child: ChoiceChip(
        selected: false,
        label: Text('Text'),
      ),
    ),
  ],
),

How to increase width of ChoiceChip to same value for all?

2 Answers2