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

Question

我正在重建一个旧应用，需要让单选按钮看起来像实际按钮。 执行此操作的最佳方法是什么？

旧应用引用:

Answer 1

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