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

Question

我目前拥有的

我想达到的目标

我现在拥有的代码

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

Answer 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],
        ),
      ),
    );
  }
}

结果：

Answer 2

无法在 material 单选按钮 class 中提供外圈的颜色，您可以从头开始创建自己的单选按钮（检查 @ Tanguy 回答）或者您复制 Radio class 并更改其 design/behavior。如果您决定复制 Radio class，您需要从 Radio 继承，以便它可以与其余 Material 设计元素一起使用。这是它的副本 https://gist.github.com/karimkod/8f7c93da798670c8b6e9b85ff9fb5383 您可以更改 The _RadioPainter class 的绘制方法，基本上可以绘制任何您想要的东西。我在要点上把它改成了紫色。

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

How to Change border color of Radio widget in Flutter?

flutter

flutter-layout

flutter-web