Flutter RadioListTile：如何修改选中项的背景颜色？

问题核心是selectedTileColor没有正确触发，原因有两点：

• 部分RadioListTile固定设置了tileColor，覆盖了选中状态的颜色切换逻辑
• 未确保selected属性与选中状态正确关联（虽默认是value == groupValue，但显式设置可避免歧义）

要实现未选中白色、选中灰色的效果，统一配置每个RadioListTile的以下属性即可：

• tileColor：设置未选中时的背景色（白色）
• selectedTileColor：设置选中时的背景色（灰色）
• selected：显式绑定当前选中状态（currentOption == 该项value）

修改后的完整代码 #

变量部分：

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: const Color(0xff000000),
        fontSize: 16,
        fontWeight: FontWeight.w500,
      ),
    ),
    value: options[0],
    groupValue: currentOption,
    onChanged: (value) {
      setState(() {
        currentOption = value.toString();
      });
    },
    // 未选中背景色为白色
    tileColor: Colors.white,
    // 选中背景色为灰色
    selectedTileColor: const Color(0xffececec),
    // 显式绑定选中状态
    selected: currentOption == options[0],
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(0),
    ),
  ),
  RadioListTile(
    contentPadding: const EdgeInsets.only(top: 12, bottom: 12, left: 10),
    title: Text(
      "Free delivery",
      style: GoogleFonts.poppins(
        color: const Color(0xff000000),
        fontSize: 16,
        fontWeight: FontWeight.w500,
      ),
    ),
    value: options[1],
    groupValue: currentOption,
    onChanged: (value) {
      setState(() {
        currentOption = value.toString();
      });
    },
    tileColor: Colors.white,
    selectedTileColor: const Color(0xffececec),
    selected: currentOption == options[1],
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(0),
    ),
  ),
]),

补充说明 #

• 统一tileColor为白色，确保未选中时样式一致
• selectedTileColor仅在selected为true时生效，显式设置selected能保证状态切换的准确性
• 如果需要更复杂的样式（如自定义边框、阴影），可以给RadioListTile嵌套Container实现，但上述方法已满足基础需求

内容的提问来源于stack exchange，提问作者Priya