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

Question

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.

This is my code:

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

Answer 1

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.