How to give background color to a RadioListTile using a RaisedButton?

Question

I have been trying to give background color to a RadioListTile by clicking the RaisedButton and create a function to assign that color to the RadioListTile that contains a certain value, for example value: 2. I'm using StatefulWidget.
The code:

int _radioValue = 0;
int _answer = 2;
void _handleRadioValueChange(int value) {
  setState(() {
    _radioValue = value;
  });
}

Scaffold(
  appBar: AppBar(
    title: Text('Question #1'),
    backgroundColor: Colors.teal,
  ),
  body: ListTileTheme(
    child: ListView(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(20.0),
          margin: EdgeInsets.all(10.0),
          color: Colors.tealAccent,
          child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor laoreet volutpat. Suspendisse malesuada ante. ',
            textAlign: TextAlign.center,
          ),
        ),
        RadioListTile(
          title: Text('Option #1'),
          value: 0,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #2'),
          value: 1,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #3'),
          value: 2,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #4'),
          value: 3,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #5'),
          value: 4,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RaisedButton(
          child: Text('Show Answer'),
          onPressed: (){},
          color: Colors.tealAccent,
          splashColor: Colors.teal,
        ),
      ],
    ),
  ),
);

Answer 1

You can change background color of RadioListTile using its FillColor property

 Padding(
              padding: const EdgeInsets.only(top:18.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [

                  Container(
                    width: 160,
                    decoration: const BoxDecoration(
                      color: Colors.white,
                    ),

                    child: RadioListTile(value: "Subjective", groupValue: "groupValue",
                      title: const Text('Subjective',style:TextStyle(color: Colors.grey),),
                      onChanged: (value){
                       print(value);
                       Selected = "Subjective";
                       setState(() {
                         
                       });
                      },
                      fillColor:MaterialStateColor.resolveWith((states) => Selected=="Subjective"?Colors.green: Colors.red),
                    ),
                  ),
                  const SizedBox(width: 5),
                  Container(
                    width: 160,
                    decoration: const BoxDecoration(
                      color: Colors.white,
                    ),
                    child: RadioListTile(value: "Objective", groupValue: "groupValue",
                      title: const Text('Objective', style:TextStyle(color: Colors.grey),),
                      onChanged: (value){
                        print(value);
                        Selected = "Objective";
                        setState(() {

                        });
                      },
                      fillColor:MaterialStateColor.resolveWith((states) => Selected=="Objective"?Colors.green: Colors.red),

                    ),
                  ),
                ],
              ),
            ),

Check Output of the Code

Answer 2

Will wrapping the RadioListTile with Container and giving the color to Container solve your problem ?

Answer 3

check out below code.

import 'package:flutter/material.dart';

  void main() {
    runApp(new MyApp());
  }

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new MaterialApp(
        title: 'Firebase Auth Demo',
        home: new CustomRadio(),
      );
    }
  }

  class CustomRadio extends StatefulWidget {
    @override
    createState() {
      return new CustomRadioState();
    }
  }

  class CustomRadioState extends State<CustomRadio> {
    List<RadioModel> sampleData = new List<RadioModel>();

    @override
    void initState() {
      super.initState();
      sampleData.add(new RadioModel(false, 'A', 'April 18'));
      sampleData.add(new RadioModel(false, 'B', 'April 17'));
      sampleData.add(new RadioModel(false, 'C', 'April 16'));
      sampleData.add(new RadioModel(false, 'D', 'April 15'));
    }


    @override
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: new AppBar(
          title: new Text("ListItem"),
        ),
        body: Scaffold(

          body: Column(
            children: <Widget>[
              RadioItem(sampleData[0]),
              RadioItem(sampleData[1]),
              RadioItem(sampleData[2]),
              RadioItem(sampleData[3]),
              RaisedButton(
                  child: Icon(Icons.add),
                  onPressed:(){
                    setState(() {
                      sampleData.forEach((element) => element.isSelected = false);
                      sampleData[0].isSelected = true;
                    });
                  }
              )
            ],
          ),
        ),
      );
    }
  }

  class RadioItem extends StatelessWidget {
    final RadioModel _item;
    RadioItem(this._item);
    @override
    Widget build(BuildContext context) {
      return new Container(
        color:  _item.isSelected ? Colors.green : Colors.white,
        margin: new EdgeInsets.all(15.0),
        child: new Row(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              height: 50.0,
              width: 50.0,
              child: new Center(
                child: new Text(_item.buttonText,
                    style: new TextStyle(
                        color:
                        _item.isSelected ? Colors.white : Colors.black,
                        //fontWeight: FontWeight.bold,
                        fontSize: 18.0)),
              ),
              decoration: new BoxDecoration(
                color: _item.isSelected
                    ? Colors.blueAccent
                    : Colors.transparent,
                border: new Border.all(
                    width: 1.0,
                    color: _item.isSelected
                        ? Colors.blueAccent
                        : Colors.grey),
                borderRadius: const BorderRadius.all(const Radius.circular(2.0)),
              ),
            ),
            new Container(
              margin: new EdgeInsets.only(left: 10.0),
              child: new Text(_item.text),
            )
          ],
        ),
      );
    }
  }

  class RadioModel {
    bool isSelected;
    final String buttonText;
    final String text;

    RadioModel(this.isSelected, this.buttonText, this.text);
  }