如何使用 flutter 将复选框形状设置为圆形

kri*_*aji 5 dart flutter

期望复选框呈圆形且内部带有右勾号

Moh*_*ari 6

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"),
                ),
              ),
Run Code Online (Sandbox Code Playgroud)


Bha*_*wal 4

以下是一个带有圆形区域和中间复选标记的示例小部件。您可以尝试使用此方法来实现圆形复选标记。

该示例最初来自此处的 SO答案

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,
                    ),
            ),
        ),
        )),
    );
}
Run Code Online (Sandbox Code Playgroud)