Search code examples
flutterdartflutter-layout

How to make Checkbox shape rounded in CheckboxListTile in Flutter?


I have implemented CheckboxListTile in a flutter. The default checkbox is square. But I need a circular Checkbox, just like the one in the below image. Is there any way to do it? Thanks for the help :)

Rounded Checkbox

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return CheckboxListTile(
      title: const Text('Animate Slowly'),
      value: timeDilation != 1.0,
      onChanged: (bool? value) {
        setState(() {
          timeDilation = value! ? 10.0 : 1.0;
        });
      },
      secondary: const Icon(Icons.hourglass_empty),
    );
  }
}



Solution

  • If you want to change the default checkbox theme you need to override it like this

    class Exmaple extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        final theme = Theme.of(context);
        final oldCheckboxTheme = theme.checkboxTheme;
    
        final newCheckBoxTheme = oldCheckboxTheme.copyWith(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),
        );
    
        return Theme(
          data: theme.copyWith(checkboxTheme: newCheckBoxTheme),
          child: CheckboxListTile(
            onChanged: (_) {},
            value: false,
          ),
        );
      }
    }