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

Question

我现在拥有的

我想要实现的

我现在所拥有的代码

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

- Ahmed ibrahim

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

结果 :

- Tanguy

---

谢谢，经过一些小改动，InkWell非常好用，比如borderRadius和highlightColor，让它的行为更像单选小部件。 - Ahmed ibrahim

Answer 2

在Material Radio类中没有提供外圆的颜色，你可以创建自己的Radio按钮。有两种方法，一是从头开始创建（参考@Tanguy的答案），或者复制Radio类并更改其设计/行为。 如果选择复制Radio类，则需要继承Radio类，以便它可以与其他Material设计元素一起使用。 这里是一个Radio类的副本https://gist.github.com/karimkod/8f7c93da798670c8b6e9b85ff9fb5383 您可以更改_RadioPainter类的paint方法以绘制您想要的任何内容。我已经在gist中将其更改为紫色。

- Abdelkrim Bournane

---

谢谢，由于这些按钮在应用程序中只使用一次，我认为实现Tanguy的解决方案更合理和更容易，但总体而言，我认为这个解决方案更好，因为它提供了更多的灵活性，同时不会失去单选框小部件的属性。 - Ahmed ibrahim