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

Question

在重建旧应用程序时需要使单选按钮看起来像实际按钮。执行此操作的最佳方法是什么？

旧应用参考：

Answer 1

您可以使用有状态小部件并跟踪该小部件中的选定值。该小部件将是一个容器，带有子文本。点击时，您会更改所选值。然后根据所选值，您 return 为您的容器使用不同的 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
       )));
  }
}

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

How do I make a Radio Widget look like a button

radio-button

flutter

flutter-layout