轻按一次选择单选按钮

Posted 2021-04-13

如何像图片中那样一次选择自定义单选按钮

答案

import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
  }
   class _HomeScreenState extends State<HomeScreen> {
       int _selection = 0;

      selectTime(int timeSelected) {
       setState(() {
       _selection = timeSelected;
          });
         }

         @override
  Widget build(BuildContext context) {
    return SafeArea(
    child: Scaffold(
     appBar: AppBar(
      title: Text("Home"),
       ),

       body: Container(
      padding: EdgeInsets.all(30),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              InkWell(
                onTap: () {
                  setState(() {
                    _selection = 1;
                  });
                },
                child: Stack(
                  children: <Widget>[
                    Container(
                      height: 40,
                      width: 150,
                      color: _selection == 1 ? Colors.green : Colors.white,
                    ),
                    Row(
                      children: <Widget>[
                        Radio(
                          focusColor: Colors.white,
                          groupValue: _selection,
                          onChanged: selectTime,
                          value: 1,
                        ),
                        Text(
                          "11:00 - 12:00",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
              InkWell(
                onTap: () {
                  setState(() {
                    _selection = 2;
                  });
                },
                child: Stack(
                  children: <Widget>[
                    Container(
                      height: 40,
                      width: 150,
                      color: _selection == 2 ? Colors.green : Colors.white,
                    ),
                    Row(
                      children: <Widget>[
                        Radio(
                          focusColor: Colors.white,
                          groupValue: _selection,
                          onChanged: selectTime,
                          value: 2,
                        ),
                        Text(
                          "12:00 - 13:00",
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
        ],
      )),
));

}}