How to make checkbox shape to circular using flutter How to make checkbox shape to circular using flutter dart dart

How to make checkbox shape to circular using flutter


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;@overrideWidget 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,                    ),            ),        ),        )),    );}


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

rounded checkbox


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