Flutter - Radio List Tile not filled with color-CodePudding

I am trying to make an age selection screen. Below is a screenshot.

As you can see there is no color filled in the radio list tile. I don't know what I am doing wrong. Please do let me know.

  final ageRange = ["18 - 21", "21 - 26", "26 "];
  var selectedIndex = 0;

          ListView.builder(
            shrinkWrap: true,
            itemCount: ageRange.length,
            itemBuilder: (context, index) {
              return RadioListTile(
                value: index,
                groupValue: registerController.userAgeRange,
                selected: index == selectedIndex,
                onChanged: changeSelectedIndex,
                title: Text(ageRange[index]),
              );
            },
          ),

CodePudding user response：

Others answer like @masum billah sanjid will work, But I think it will be better to provide data type on RadioListTile.

While the value will be string, I prefer

final ageRange = ["18 - 21", "21 - 26", "26 "];
  String? selectedValue;
  changeSelectedIndex(v) {
    setState(() {
      selectedValue = v;
    });
  }

///....
return RadioListTile<String>(
  value: ageRange[index],
  groupValue: selectedValue,
  selected: selectedValue == ageRange[index],
  onChanged: changeSelectedIndex,
  title: Text(ageRange[index]),
);

CodePudding user response：

Change groupValue property with selectedIndex

Here is my example

  final ageRange = ["18 - 21", "21 - 26", "26 "];
  var selectedIndex = 0;
  changeSelectedIndex(v) {
    selectedIndex = v;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: ageRange.length,
        itemBuilder: (context, index) {
          return RadioListTile(
            value: index,
            groupValue: selectedIndex,
            selected: index == selectedIndex,
            onChanged: changeSelectedIndex,
            title: Text(ageRange[index]),
          );
        },
      ),
    );
  }

CodePudding user response：

you can try this:

ListView.builder(
        shrinkWrap: true,
        itemCount: ageRange.length,
        itemBuilder: (context, index) {
          return RadioListTile(
            value: index,
            groupValue: selectedIndex,
            selected: selectedIndex == index,
            onChanged: changeSelectedIndex,
            title: Text(ageRange[index]),
          );
        },
      ),

CodePudding user response：

Wrap your RadioListTile inside a Container:

    return Container(
        color: Colors.blue,
        child: RadioListTile(
            value: index,
            groupValue: registerController.userAgeRange,
            selected: index == selectedIndex,
            onChanged: changeSelectedIndex,
            title: Text(ageRange[index]),
        ),
    );