Question 372489 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Is it possible to change radio button width when it's unselected?

I would like to have radio button lighter (less wide circle) when it’s in unselected state, is there some way to change it? The first picture is what I have. The second one is what I would like to have.

enter image description here

enter image description here

This is my code:

RadioListTile(
            controlAffinity: ListTileControlAffinity.trailing,
            title: Text('Active'),
            value: OfferStatus.active,
            groupValue: OfferStatus.inactive,
            onChanged: (value) {},
          ),
Tags:

2

Answers


  1. 0

    nika

    fillColor: MaterialStateProperty.all(const Color.fromARGB(255, 224, 224, 224))

    Have a nice coding 🙂

    Login or Signup to reply.
  2. 0

    Not directly, no. The Radio widget is surprisingly limited when it comes to what you’re able to directly theme. However, since your Radio will inevitably be in a StatefulWidget, you could toggle the visibility of the Radio entirely and render whatever widget you want. Alternatively, could could use a Stack widget to overlay another widget on top of the Radio. Finally, you could use a ShaderMask to overlay something. I can’t give you the exact code, but it would look something like this:

    ShaderMask(
  shaderCallback: (Rect bounds) {
    if (isActive) {
      return const LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: [
          0,
          0.75,
          0.95,
        ],
        colors: [
          Colors.white,
          Colors.white,
          Colors.transparent,
        ],
      ).createShader(bounds);
    }

    return const LinearGradient(colors: [Colors.white, Colors.white])
        .createShader(bounds);
  },
  child: Radio(),
)

    Obviously, this particular shader would draw a gradient, but you could use it to draw whatever you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search