如何在Flutter中自定义单选按钮？

Question

我想像这些按钮一样做按钮，我尝试使用单选按钮，但无法自定义它们。您有任何想法我该怎么做吗？

Answer 1

我编写了一个可重用的小部件，模仿了单选按钮的行为：

自定义广播窗口小部件

class CustomRadioWidget<T> extends StatelessWidget {
  final T value;
  final T groupValue;
  final ValueChanged<T> onChanged;
  final double width;
  final double height;

  CustomRadioWidget({this.value, this.groupValue, this.onChanged, this.width = 32, this.height = 32});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GestureDetector(
        onTap: () {
          onChanged(this.value);
        },
        child: Container(
          height: this.height,
          width: this.width,
          decoration: ShapeDecoration(
            shape: CircleBorder(),
            gradient: LinearGradient(
              colors: [
                Color(0xFF49EF3E),
                Color(0xFF06D89A),
              ],
            ),
          ),

          child: Center(
            child: Container(
              height: this.height - 8,
              width: this.width - 8,
              decoration: ShapeDecoration(
                shape: CircleBorder(),
                gradient: LinearGradient(
                  colors: value == groupValue ? [
                    Color(0xFFE13684),
                    Color(0xFFFF6EEC),
                  ] : [
                    Theme.of(context).scaffoldBackgroundColor,
                    Theme.of(context).scaffoldBackgroundColor,
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

您可以将其添加到代码中，例如：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
     CustomRadioWidget(
           value: "0",
           groupValue: _radValue,
           onChanged: (String value) {
              setState(() {
                 _radValue = value;
              });
           },
      ),
      CustomRadioWidget(
           value: "1",
           groupValue: _radValue,
           onChanged: (String value) {
              setState(() {
                _radValue = value;
              });
           },
      ),
   ],
),

输出看起来像这样：

Answer 2

您可以创建自己的自定义复选框，如下所示：

这应该对您有帮助

class CustomCheckBox extends StatefulWidget {
  @override
  _CustomCheckBoxState createState() => _CustomCheckBoxState();
}

class _CustomCheckBoxState extends State<CustomCheckBox> {

  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            GestureDetector(
              onTap: (){
                setState(() {
                  isChecked = !isChecked;
                });
              },
              child: Container(
                width: 20,
                height: 20,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.green, width: 2),
                  borderRadius: BorderRadius.circular(60)
                ),
                child: Container(
                  width: 20,
                  height: 20,
                  decoration: BoxDecoration(
                      color: isChecked ? Colors.pink : Colors.white,
                      borderRadius: BorderRadius.circular(60)
                  ),
                ),
              ),
            ),
            SizedBox(width: 10,),
            Text("M")
          ],
        ),
      ),
    );
  }
}

输出：