Flutter开发：点击Container容器时如何选中对应的Radio单选按钮

解决方案 #

你只需要给每个Container外层包裹GestureDetector（如果需要点击水波纹效果可以替换为InkWell），在点击回调中主动触发对应单选值的切换逻辑即可，修改后代码如下：

// 手动模式选项容器
GestureDetector(
  onTap: () => _handleChange("manual"), // 点击容器任意位置触发选中逻辑
  child: Container(
    height: 60,
    width: 130,
    decoration: BoxDecoration(
        color: _radioBtnVal == 'manual' ? AMBER : WHITE,
        borderRadius: BorderRadius.circular(15)),
    child: Row(
      children: [
        Radio<String>(
            activeColor: Colors.red,
            value: "manual",
            groupValue: _radioBtnVal,
            onChanged: _handleChange), // 保留Radio本身点击能力不影响原有交互
        Text(
          "Manual",
          style: TextStyle(
              color: _radioBtnVal == 'manual' ? WHITE : BLACK,
              fontWeight: FontWeight.bold),
        ),
      ],
    ),
  ),
),
SizedBox(width: 80),
// 视频通话选项容器
GestureDetector(
  onTap: () => _handleChange("video"), // 点击容器直接触发选中
  child: Container(
    height: 60,
    width: 130,
    decoration: BoxDecoration(
        color: _radioBtnVal == 'video' ? AMBER : WHITE,
        borderRadius: BorderRadius.circular(15)),
    child: Row(
      children: [
        Radio<String>(
            activeColor: Colors.red,
            value: "video",
            groupValue: _radioBtnVal,
            onChanged: _handleChange),
        Text(
          "Video Call",
          style: TextStyle(
              color: _radioBtnVal == 'video' ? WHITE : BLACK,
              fontWeight: FontWeight.bold),
        ),
      ],
    ),
  ),
),

如果需要水波纹反馈，把GestureDetector替换为InkWell，同时将Container的decoration属性移到InkWell上即可避免水波纹被遮挡。

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