CODEWITHSUNDEEP
flutterflutter-layoutflutter-web
Ahmed ibrahim
Ahmed ibrahim

Reputation: 1175

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

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

Upvotes: 10

Views: 7604

Answers (2)

Tanguy
Tanguy

Reputation: 984

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

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

Result :

enter image description here

Upvotes: 11

Abdelkrim
Abdelkrim

Reputation: 1221

There is no way to provide the color of the outer circle in the material Radio class, what you can do is to create your own radio Button, either from scratch (Check the @Tanguy answer)or you copy the Radio class and change its design/behavior. If you decide to copy the Radio class you need to inherit from the Radio so it can work with the rest of the Material design elements. Here is a copy of it https://gist.github.com/karimkod/8f7c93da798670c8b6e9b85ff9fb5383 You can change the paint method of The _RadioPainter class to draw basically whatever you want. I have changed it in the gist to look purple.

Upvotes: 2

Related Questions