如何为Flutter ChoiceChip组件设置固定宽度？

你当前的问题是用SizedBox包裹ChoiceChip后，组件宽度仍会随标签文本变化——这是因为ChoiceChip内部的label默认会自适应文本宽度，外层的SizedBox无法直接约束它的内部布局。可以通过以下两种方式解决：

方案一：用Row+Expanded约束文本宽度 #

将label改为Row组件，用Expanded包裹Text，让文本占满ChoiceChip的剩余宽度，同时可设置文本对齐方式优化显示：

return SizedBox(
  width: MediaQuery.of(context).size.width * 0.4,
  child: ChoiceChip(
    side: const BorderSide(color: Color.fromARGB(255, 10, 60, 100)),
    backgroundColor: Colors.transparent,
    selectedColor: const Color.fromARGB(255, 10, 60, 100),
    label: Row(
      children: [
        Expanded(
          child: Text(
            'Free Wifi',
            style: isChecked ? _filterButtonTextStyle : _g4LabelNormal,
            maxLines: 2,
            textAlign: TextAlign.center, // 可选：让文本居中，提升视觉效果
          ),
        ),
      ],
    ),
    selected: isChecked,
    avatar: SvgPicture.asset(
      'assets/images/wifi.svg',
      width: _filterAmenityIcon,
      height: _filterAmenityIcon,
      color: isChecked ? _whiteColor : _filterAmenityColor,
    ),
    onSelected: (value) {
      // 此处添加选中状态切换逻辑
    },
  ),
);

方案二：用Container直接指定文本宽度 #

如果不需要文本换行，可以计算出文本区域的可用宽度，用Container包裹Text并设置固定宽度，同时处理文本溢出：

return SizedBox(
  width: MediaQuery.of(context).size.width * 0.4,
  child: ChoiceChip(
    side: const BorderSide(color: Color.fromARGB(255, 10, 60, 100)),
    backgroundColor: Colors.transparent,
    selectedColor: const Color.fromARGB(255, 10, 60, 100),
    label: Container(
      // 减去头像宽度和默认内边距，得到文本区域的可用宽度
      width: MediaQuery.of(context).size.width * 0.4 - _filterAmenityIcon - 16,
      child: Text(
        'Free Wifi',
        style: isChecked ? _filterButtonTextStyle : _g4LabelNormal,
        overflow: TextOverflow.ellipsis, // 文本过长时显示省略号
        textAlign: TextAlign.center,
      ),
    ),
    selected: isChecked,
    avatar: SvgPicture.asset(
      'assets/images/wifi.svg',
      width: _filterAmenityIcon,
      height: _filterAmenityIcon,
      color: isChecked ? _whiteColor : _filterAmenityColor,
    ),
    onSelected: (value) {
      // 此处添加选中状态切换逻辑
    },
  ),
);

这两种方式都能强制ChoiceChip保持你设置的固定宽度，不会随文本内容变化。

内容的提问来源于stack exchange，提问作者Moony-Stary