Home > Blockchain >  How to increase width of ChoiceChip to same value for all?
How to increase width of ChoiceChip to same value for all?

Time:02-17

I am using 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);
            }),

CodePudding user response:

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'),
      ),
    ),
  ],
),
  • Related