I am trying to create three radio buttons using the "RadioListTile" widget. How to change the background color of the selected tile?
I want the selected radio tile to be gray and the others to be white. How to achieve this?
I tried the selectedTileColor property. But it didn’t work.
Sample code:
List<String> options = ['option1', 'option2'];
String currentOption = options[0];
Column(children: [
RadioListTile(
contentPadding: const EdgeInsets.only(
top: 12, bottom: 12, left: 10),
title: Text(
"fastest delivery",
style: GoogleFonts.poppins(
color: Color(0xff000000),
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
value: options[0],
groupValue: currentOption,
onChanged: (value) {
setState(() {
currentOption = value.toString();
});
},
tileColor: Color(0xffececec),
selectedTileColor: Color(0xff000000),
),
RadioListTile(
contentPadding: const EdgeInsets.only(
top: 12, bottom: 12, left: 10),
title: Text(
"Free delivery",
style: GoogleFonts.poppins(
color: Color(0xff000000),
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
value: options[1],
groupValue: currentOption,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0)),
onChanged: (value) {
setState(() {
currentOption = value.toString();
});
},
tileColor: Colors.transparent,
selectedTileColor: Color(0xffececec),
),
]),
2
Answers
Try this,
@Priya Wrapping the RadioListTile with a container and colouring the container solves your problem.
Hope this helps!