skip to Main Content

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


  1. Try this,

    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: (currentOption == options[0]) ? Color(0xff000000) : 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: (currentOption == options[1]) ? Color(0xff000000) : Color(0xffececec),
                          //selectedTileColor: Color(0xffececec),
                      ),
                    ])
    
    Login or Signup to reply.
  2. @Priya Wrapping the RadioListTile with a container and colouring the container solves your problem.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search