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

Question

Expecting the checkbox in circular shape with inside right tick mark

Answer 1

Following is a sample Widget with round area and check mark in middle. You can play around with this to achieve a circular check mark.

This sample is originally from this SO answer here .

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

For this requirement pub dev providing a package circular_check_box

Refer this link https://pub.dev/packages/circular_check_box

Detail explanation will available in above link

_{(source: i2.wp.com )}

Answer 3

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

Answer 4

There is a simple package you can add that keeps the functionality and animation of the checkbox: https://pub.dev/packages/getwidget

Implementation after installing and importing package:

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

Answer 5

Checkbox(
          shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(18.0)),
          value: true
          onChanged: (value) {},
        ),