Как сделать радио виджет похожим на кнопку

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
       )));
  }
}