Question

使用内部右勾号标记圆形复选框

Answer 1

以下是一个示例小部件，其中间具有圆形区域和复选标记您可以试一下以实现圆形的对勾标记

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 2

为此要求pub dev提供了一个软件包 circular_check_box

引用此链接https://pub.dev/packages/circular_check_box

详细说明将在上面的链接中提供

rounded checkbox

Answer 3

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

安装导入包后的实现：

 GFCheckbox(
    size: GFSize.SMALL,
    activeBgColor: GFColors.DANGER,
    type: GFCheckboxType.circle,
    onChanged: (value) {
      setState(() {
        isChecked = value;
      });
    },
    value: isChecked,
    inactiveIcon: null,
  ),

Answer 4

Theme(
                data: ThemeData(
                    checkboxTheme: CheckboxThemeData(
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25)))),
                child: CheckboxListTile(
                  value: model.specialSale,
                  secondary: Icon(
                    CustomIcons.percentage,
                    color: Theme.of(context).primaryColor,
                  ),
                  onChanged: (v) {
                
                  },
                  title: Text("Checked"),
                ),
              ),

如何使用颤动使复选框形状变为圆形

4 个答案: