如何使Radio Widget看起来像一个按钮

Question

我正在重建一个旧的应用程序，需要使单选按钮看起来像实际的按钮。什么是最好的方法呢？

旧应用参考：

Answer 1

您可以使用有状态窗口小部件并跟踪该窗口小部件中的选定值。小部件将是一个容器，带有子Text。点按后，您可以更改所选值。然后根据选定的值为容器返回不同的BoxDecoration。请参阅下面的代码：

class ButtonStyleRadioButton extends StatefulWidget {
 // Function to call when tapped
 Function(bool) onChanged;

 ButtonStyleRadioButton({this.onChanged});

_ButtonStyleRadioButtonState createState() => _ButtonStyleRadioButtonState();
}

class _ButtonStyleRadioButtonState extends State<ButtonStyleRadioButton> {
  bool _selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){ setState(() {
       _selected = !_selected; 
       // Callback to passed in function
       widget.onChanged(_selected);
      });},
      child: Container(
      padding: EdgeInsets.all(10.0),
      child:  Text('Consumer'),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(50.0),
         border: Border.all(color: Colors.grey[400]),
         color: _selected ? Colors.red : Colors.white
       )));
  }
}