Flutter中能否修改未选中状态Radio按钮的宽度？

因为Flutter默认的Radio组件没有直接提供修改未选中状态边框宽度的参数，你可以通过以下两种方式实现需求：

方法一：自定义Radio组件结合ListTile使用 #

这种方式能完全精准控制未选中状态的边框粗细，直接替换RadioListTile的内置Radio即可：

// 用ListTile组合自定义Radio，替代RadioListTile
ListTile(
  title: const Text('Active'),
  trailing: CustomRadio(
    value: OfferStatus.active,
    groupValue: OfferStatus.inactive,
    onChanged: (value) {},
    unselectedBorderWidth: 1.0, // 这里设置未选中时的边框宽度
  ),
  onTap: () {
    // 点击列表项时触发选择逻辑，替换为你的状态更新代码
  },
)

// 自定义Radio组件
class CustomRadio<T> extends StatelessWidget {
  final T value;
  final T groupValue;
  final ValueChanged<T?>? onChanged;
  final double unselectedBorderWidth;

  const CustomRadio({
    super.key,
    required this.value,
    required this.groupValue,
    this.onChanged,
    this.unselectedBorderWidth = 2.0,
  });

  @override
  Widget build(BuildContext context) {
    final isSelected = value == groupValue;
    final primaryColor = Theme.of(context).colorScheme.primary;

    return GestureDetector(
      onTap: onChanged != null ? () => onChanged!(value) : null,
      child: Container(
        width: 20.0, // 控制Radio整体尺寸
        height: 20.0,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(
            color: isSelected ? primaryColor : Colors.grey,
            width: isSelected ? 2.0 : unselectedBorderWidth, // 选中/未选中用不同边框宽度
          ),
          color: isSelected ? primaryColor : Colors.transparent,
        ),
        child: isSelected
            ? const Icon(
                Icons.check,
                size: 14.0,
                color: Colors.white,
              )
            : null,
      ),
    );
  }
}

方法二：通过Theme间接调整（有局限性） #

如果不想完全自定义组件，可以尝试通过Theme修改Radio样式，但这种方式无法单独区分选中/未选中的边框宽度，只能统一调整：

Theme(
  data: Theme.of(context).copyWith(
    radioTheme: RadioThemeData(
      visualDensity: VisualDensity.compact,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(100),
        side: const BorderSide(width: 1.0, color: Colors.grey),
      ),
    ),
  ),
  child: RadioListTile(
    controlAffinity: ListTileControlAffinity.trailing,
    title: const Text('Active'),
    value: OfferStatus.active,
    groupValue: OfferStatus.inactive,
    onChanged: (value) {},
  ),
)

注意：该方法的边框设置会同时作用于选中和未选中状态，需要精准区分样式的话，优先选择自定义组件方案。

内容的提问来源于stack exchange，提问作者nika