Home Flutter RadioListTile – How to reduce some space between the radio icon and title?

Questions

Flutter RadioListTile – How to reduce some space between the radio icon and title?

March 16, 2023

How to reduce the space between the radio icon and title?

I tried with content padding property. But couldn’t reduce the gap between them. Is there any way to achieve this?

Sample code:

RadioListTile(
  contentPadding: const EdgeInsets.only(top: 12, bottom: 12, left: 5),
  title: Text(
    "Tap Payment",
    style: GoogleFonts.poppins(
      color: Color(0xff000000),
      fontSize: 16,
      fontWeight: FontWeight.w500,
      letterSpacing: 0.5,
    ),
  ),
  value: values[0],
  groupValue: currentValue,
  onChanged: (value) {
    setState(() {
      currentValue = value.toString();
    });
  },
  tileColor: (currentValue == values[0])
      ? Color(0xffececec)
      : Colors.transparent,
),

>Solution :

Internally, RadioListTile use ListTile and the gap is coming from horizontalTitleGap default is 16 . You can override the theme.

Theme(
  data: Theme.of(context).copyWith(
    listTileTheme: ListTileThemeData(
      horizontalTitleGap: 4,//here adjust based on your need
    ),
  ),
  child: RadioListTile(

Another thing you can do is using Row with RadioButton.