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

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

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

Answer 2

我很难建立这个解决方案，并提出了这个解决方案。我以为有一天像我这样的人会需要它。就在这里。

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 3

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

[credential]
   username = [Github-Username]
[user]
   name = [Fullname]
   email = [Email Address]

Answer 4

自 Flutter 2.2.0 起，shape 属性已被引入到 Checkbox Material Class 中。

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

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

Answer 5

您可以尝试使用以下代码：圆形复选框

 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 6

您可以添加一个简单的程序包，其中保留了复选框的功能和动画效果：https://pub.dev/packages/circular_check_box

安装和导入软件包后的实现：

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

Answer 7

尝试一下：

import 'package:flutter/material.dart';

class CircleCheckbox extends StatelessWidget {
  final bool value;
  final ValueChanged<bool> onChanged;
  final Color activeColor;
  final Color checkColor;
  final bool tristate;
  final MaterialTapTargetSize materialTapTargetSize;

  CircleCheckbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.materialTapTargetSize,
  })  : assert(tristate != null),
        assert(tristate || value != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: SizedBox(
        width: Checkbox.width,
        height: Checkbox.width,
        child: Container(
          decoration: new BoxDecoration(
            border: Border.all(
                width: 2,
                color: Theme.of(context).unselectedWidgetColor ??
                    Theme.of(context).disabledColor),
            borderRadius: new BorderRadius.circular(100),
          ),
          child: Checkbox(
            value: value,
            tristate: tristate,
            onChanged: onChanged,
            activeColor: activeColor,
            checkColor: checkColor,
            materialTapTargetSize: materialTapTargetSize,
          ),
        ),
      ),
    );
  }
}

Answer 8

复制材料复选框的代码并创建新的复选框小部件。

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

Answer 9

Container(
        decoration: BoxDecoration(
            border: Border.all(
              color: (checkedValue) ? Colors.red : Colors.blue,
              width: 1,
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            )),
        width: 24,
        height: 24,
        child: Theme(
          data: ThemeData(
            unselectedWidgetColor: Colors.transparent,
          ),
          child: Checkbox(
            activeColor: Colors.transparent,
            checkColor: Colors.red,
            value: checkedValue,
            tristate: false,
            onChanged: (bool isChecked) {
              setState(() {
                checkedValue = isChecked;
              });
            },
          ),
        ),
      ),

Answer 10

我们只能使用材质图标来实现此目的，如下所示：

assemble

Answer 11

随着 Flutter 2.2.1 形状属性被添加。所以很容易添加复选框的更改形状。

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

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),)
)

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

Answer 12

假设您有一个布尔变量 acceptTerms，您可以像这样在 Flutter 2.2 中实现它。确保您也保存复选框状态：

ARRAY_CONSTRAIN

Answer 13

您可以简单地设置复选框的形状如下;

Checkbox(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15)),
})

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

13 个答案: