flutterandroid-chips

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


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);
     })

Solution

  • enter image description hereJust 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);
                }),