如何在 Flutter 中创建圆形 CheckBox？或者更改 CheckBox 的样式，例如 Flutter 中的选定图像？

Question

我想创建一个像这样的圆形 CheckBox

我已经尝试了多种变体，但它们似乎都不起作用。包括我尝试使用 ClipRRect 。

因为代码比较多，这里只选取一部分展示。

new Row(
      children: <Widget>[
        //new ClipRRect(
        // borderRadius: BorderRadius.all(Radius.circular(90.0)),
        //  child:
          new Checkbox(
              tristate: true,
              value: true,
              onChanged: (bool newValue){
                setState(() {

                });
              },
            activeColor: Color(0xff06bbfb),
          ),
       // ),

        new Expanded(
            child: new Text('???????QQ????????????',
              style: new TextStyle(
                  color: Color(0xff797979)
              ),
            )
        ),

      ],
    ),

我是 Flutter 的新手。提前致谢。

Answer 1

从Flutter 2.2.0开始，Checkbox Material Class中引入了shape属性。

向复选框添加圆角的示例：

Checkbox(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)),
)

Answer 2

您可以尝试使用此代码：Round CheckBox

 bool _value = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Circle CheckBox"),
      ),
      body: Center(
          child: InkWell(
        onTap: () {
          setState(() {
            _value = !_value;
          });
        },
        child: Container(
          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: _value
                ? Icon(
                    Icons.check,
                    size: 30.0,
                    color: Colors.white,
                  )
                : Icon(
                    Icons.check_box_outline_blank,
                    size: 30.0,
                    color: Colors.blue,
                  ),
          ),
        ),
      )),
    );
  }

Answer 3

Material Design 复选框有一个shape属性，您可以将CircleBorder()设置为它，它将是圆形的。

Checkbox(
      checkColor: Colors.white,
      fillColor: MaterialStateProperty.resolveWith(getColor),
      value: isChecked,
      shape: CircleBorder(),
      onChanged: (bool? value) {
        setState(() {
          isChecked = value!;
        });
      },
    );

Answer 4

复制 Material Checkbox 的代码并创建新的 Checkbox 小部件。

在这个小部件中，将变量更改const Radius _kEdgeRadius = Radius.circular(1.0)为Radius.circular(100)。

Answer 5

我很难构建它并想出了这个解决方案。我想有一天像我这样的人会需要它。所以在这里。

ClipRRect(
      clipBehavior: Clip.hardEdge,
      borderRadius: BorderRadius.all(Radius.circular(5)),
      child: SizedBox(
        width: Checkbox.width,
        height: Checkbox.width,
        child: Container(
          decoration: new BoxDecoration(
            border: Border.all(
              width: 1,
            ),
            borderRadius: new BorderRadius.circular(5),
          ),
          child: Theme(
            data: ThemeData(
              unselectedWidgetColor: Colors.transparent,
            ),
            child: Checkbox(
              value: isWinnerTakesAll,
              onChanged: (state) =>
                  setState(() => isWinnerTakesAll = !isWinnerTakesAll),
              activeColor: Colors.transparent,
              checkColor: CommonColors.checkBoxColor,
              materialTapTargetSize: MaterialTapTargetSize.padded,
            ),
          ),
        ),
      ),
    ),

我希望这能解决你的问题！欢迎提出任何问题。

使用主题小部件的原因 如果没有主题小部件，复选框的原始方框处于未选中状态，我将其删除并使其透明。

Answer 6

请注意：此软件包已停产！

您可以添加一个简单的包来保留复选框的功能和动画：https : //pub.dev/packages/circular_check_box

安装导入包后的实现：

CircularCheckBox(
          value: someBooleanValue,
          materialTapTargetSize: MaterialTapTargetSize.padded,
          onChanged: (bool x) {
          someBooleanValue = !someBooleanValue;
          }
        ),

Answer 7

像这样设置主题：

 Theme(
  data: ThemeData(
    checkboxTheme: CheckboxThemeData(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(25),
      ),
    ),
  ),
);      

Answer 8

Flutter 2.2.1添加了 shape 属性。所以很容易添加改变复选框的形状。

在这里我创建了一个圆形复选框小部件：

import 'package:flutter/material.dart';

class CircularCheckbox extends StatelessWidget {
  final bool? value;
  final ValueChanged<bool?>? onChanged;
  const CircularCheckbox({Key? key, required this.value, required this.onChanged}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Transform.scale(
      scale: 1.3,
      child: Checkbox(
        value: value,
        onChanged: onChanged,
      ),
    );
  }
}

您可以根据您的设计缩放复选框。

对于主题复选框：更新 MaterialApp 的 themeData，如下所示：

MaterialApp(
theme: ThemeData(toggleableActiveColor: colorScheme.primary,
             checkboxTheme: Theme.of(context).checkboxTheme.copyWith(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20),
              ),
              side: BorderSide(
                  width: 1.5, color:
                  Theme.of(context).unselectedWidgetColor),
              splashRadius: 0),)
)

通过应用主题，您将获得一个漂亮的圆形复选框：