点击容器时如何选择单选按钮？

Question

基本上，有一排有两个容器，其中子容器作为单选按钮。容器根据选定的单选按钮更改颜色，但我希望容器通过点击它们而不是完全通过点击单选按钮来更改颜色。

代码：

Container(
            height: 60,
            width: 130,
            decoration: BoxDecoration(
                color: _radioBtnVal == 'manual' ? AMBER : WHITE,
                borderRadius: BorderRadius.circular(15)),
            child: Row(
              children: [
                Radio<String>(
                    //activeColor: WHITE,
                    activeColor: Colors.red,
                    value: "manual",
                    groupValue: _radioBtnVal,
                    onChanged: _handleChange),
                Text(
                  "Manual",
                  style: TextStyle(
                      color: _radioBtnVal == 'manual' ? WHITE : BLACK,
                      fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ), 
 SizedBox(width: 80),
            Container(
              height: 60,
              width: 130,
              decoration: BoxDecoration(
                  color: _radioBtnVal == 'video' ? AMBER : WHITE,
                  borderRadius: BorderRadius.circular(15)),
              child: Row(
                children: [
                  Radio<String>(
                      //activeColor: WHITE,
                      activeColor: Colors.red,
                      value: "video",
                      groupValue: _radioBtnVal,
                      onChanged: _handleChange),
                  Text(
                    "Video Call",
                    style: TextStyle(
                        color: _radioBtnVal == 'video' ? WHITE : BLACK,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
       

这是输出的图像。

输出：

Answer 1

您必须使用手势检测器包装容器，并且每次轻按容器时，您都必须将值传递给处理单选按钮和 setstate 的函数。我已更新您的代码以获得所需的输出。

ma​​in.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
      const MaterialApp(debugShowCheckedModeBanner: false, home: RadioTest()));
}

class RadioTest extends StatefulWidget {
  const RadioTest({
    Key? key,
  }) : super(key: key);

  @override
  State<RadioTest> createState() => _RadioTestState();
}

class _RadioTestState extends State<RadioTest> {
  String _radioBtnVal = "";

  _handleChange(String? value) {
    setState(() {
      _radioBtnVal = value.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          GestureDetector(
            onTap: () {
                _handleChange('manual');
            },
            child: Container(
              height: 60,
              width: 130,
              decoration: BoxDecoration(
                  color: _radioBtnVal == 'manual' ? Colors.amber : Colors.white,
                  borderRadius: BorderRadius.circular(15)),
              child: Row(
                children: [
                  Radio<String>(
                      //activeColor: WHITE,
                      activeColor: Colors.red,
                      value: "manual",
                      groupValue: _radioBtnVal,
                      onChanged: _handleChange),
                  Text(
                    "Manual",
                    style: TextStyle(
                        color: _radioBtnVal == 'manual'
                            ? Colors.white
                            : Colors.black,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 80),
          GestureDetector(
            onTap: () {
                _handleChange('video');
            },
            child: Container(
              height: 60,
              width: 130,
              decoration: BoxDecoration(
                  color: _radioBtnVal == 'video' ? Colors.amber : Colors.white,
                  borderRadius: BorderRadius.circular(15)),
              child: Row(
                children: [
                  Radio<String>(
                      //activeColor: WHITE,
                      activeColor: Colors.red,
                      value: "video",
                      groupValue: _radioBtnVal,
                      onChanged: _handleChange),
                  Text(
                    "Video Call",
                    style: TextStyle(
                        color: _radioBtnVal == 'video'
                            ? Colors.white
                            : Colors.black,
                        fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}