How to create a round CheckBox in Flutter ? Or change the CheckBox's style , such as selected image in Flutter?
You can try & play with this Code: Round CheckBox
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,
),
),
),
)),
);
}
Copy the code of the Material Checkbox and create your new Checkbox widget.
In this widget change the variable const Radius _kEdgeRadius = Radius.circular(1.0)
to Radius.circular(100)
.
There is a simple package you can add that keeps the functionality and animation of the checkbox: https://pub.dev/packages/circular_check_box
Implementation after installing and importing package:
CircularCheckBox(
value: someBooleanValue,
materialTapTargetSize: MaterialTapTargetSize.padded,
onChanged: (bool x) {
someBooleanValue = !someBooleanValue;
}
),