How to Change border color of Radio widget in Flutter?


What I Currently Have

enter image description here

What I want to achieve

enter image description here

The Code that I have now

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


It’s not possible to customize that much the Radio button. The only color parameter for the button is fillColor. It will impact both the inner plain circle and the outer circle.

If you really want a custom look you’ll need to build your own widget.
Here is a simple example that you can customize and improve. You could also try to start from the source code of the flutter Radio widget.

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);

  _CustomRadioState createState() => _CustomRadioState();

class _CustomRadioState extends State<CustomRadio> {
  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:, color: selected ? Colors.white : Colors.grey[200]),
        child: Icon(
          size: 30,
          color: selected ? Colors.deepPurple : Colors.grey[200],

Result :

enter image description here

Answered By – Tanguy

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *