如何在 Flutter 中更改 Radio 小部件的边框颜色？答案

【问题标题】：How to Change border color of Radio widget in Flutter?如何在 Flutter 中更改 Radio 小部件的边框颜色？
【发布时间】：2021-11-22 14:52:04
【问题描述】：

我目前拥有的

我想要达到的目标

我现在拥有的代码

Radio(
   value: 2,
   groupValue: val,
   onChanged: (value) {
   setState(() {
      val = value;
      });
   },
  activeColor: secondaryColor,)

【问题讨论】：

标签： flutter flutter-layout flutter-web

【解决方案1】：

无法自定义那么多单选按钮。按钮的唯一颜色参数是 fillColor。它会影响内圆和外圆。

如果您真的想要自定义外观，则需要构建自己的小部件。这是一个您可以自定义和改进的简单示例。您也可以尝试从 Flutter Radio 小部件的源代码开始。

class CustomRadio extends StatefulWidget {
  final int value;
  final int groupValue;
  final void Function(int) onChanged;
  const CustomRadio({Key? key, required this.value, required this.groupValue, required this.onChanged})
      : super(key: key);

  @override
  _CustomRadioState createState() => _CustomRadioState();
}

class _CustomRadioState extends State<CustomRadio> {
  @override
  Widget build(BuildContext context) {
    bool selected = (widget.value == widget.groupValue);

    return InkWell(
      onTap: () => widget.onChanged(widget.value),
      child: Container(
        margin: const EdgeInsets.all(4),
        padding: const EdgeInsets.all(4),
        decoration: BoxDecoration(shape: BoxShape.circle, color: selected ? Colors.white : Colors.grey[200]),
        child: Icon(
          Icons.circle,
          size: 30,
          color: selected ? Colors.deepPurple : Colors.grey[200],
        ),
      ),
    );
  }
}

结果：

【讨论】：

谢谢，对墨水池进行一些小的更改（例如borderRadius和highlightColor）效果很好，只是让它的行为更像一个收音机小部件。

【解决方案2】：

没有办法在材料 Radio 类中提供外圈的颜色，你可以做的是创建自己的单选按钮，或者从头开始（检查@Tanguy 答案）或者你复制 Radio 类和改变它的设计/行为。如果您决定复制 Radio 类，则需要从 Radio 继承，以便它可以与其他 Material 设计元素一起使用。这是它的副本https://gist.github.com/karimkod/8f7c93da798670c8b6e9b85ff9fb5383 您可以更改 _RadioPainter 类的绘制方法以绘制您想要的任何内容。我已经把它改成了紫色。

【讨论】：

谢谢，因为这些按钮在应用程序中只是一次性使用，我认为只实现 Tanguy 解决方案会更合乎逻辑和更容易，但总的来说我认为这个解决方案更好，因为它提供了更多的灵活性不会丢失无线电小部件的属性。