CODEWITHSUNDEEP
flutterdartflutter-layout
Jay Tillu
Jay Tillu

Reputation: 1548

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

Upvotes: 1

Views: 10617

Answers (5)

RodXander
RodXander

Reputation: 833

Instead of a massive radius on a RoundedRectangleBorder, use CircleBorder. It'll work every time. The other way, it'll stop working given a big enough rectangle.

CheckboxListTile(
    shape: const CircleBorder(),
),

enter image description here

Upvotes: 0

Muhaiminur Rahman
Muhaiminur Rahman

Reputation: 3152

In addition, with the @Hosam Hasan answer you can do this way..

                  Container(
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.teal)),
                child: CheckboxListTile(
                  checkboxShape:  RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),
                  title: const Text('Woolha.com'),
                  subtitle: const Text('A programming blog'),
                  value: _isChecked,
                  activeColor: ProjectColors.green2,
                  checkColor: ProjectColors.white,
                  onChanged: (value) {
                    setState(() {
                      _isChecked = value!;
                    });
                  },
                ),
              ),

Upvotes: 0

Rishita Joshi
Rishita Joshi

Reputation: 425

you can implement CheckboxListTile widget that provide the label and shape property. also attache the outputenter image description here

SizedBox(
                      width: 160,
                      height: 50,
                      child: CheckboxListTile(
                        contentPadding: EdgeInsets.all(0),
                        title: Text("Remember Me"), //    <-- label
                        value: true,
                        onChanged: (newValue) {},
                        controlAffinity: ListTileControlAffinity
                            .leading, //  <-- leading Checkbox
                        activeColor: ColorPalette.purpleColor,
                        checkboxShape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15)),
                      ),
                    ),

Upvotes: 7

Edgar Joel Perez
Edgar Joel Perez

Reputation: 37

You can also implement it directly in the widget, in case you need to implement a theme first.




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: ThemeData(
                        checkboxTheme: CheckboxThemeData(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                        ),
                        unselectedWidgetColor: const Color(0xFF95A1AC),
                      ),
                      child: CheckboxListTile(
                         shape: CircleBorder(),
                    
                        value: checkboxListTileValue ??= false,
                        onChanged: (newValue) =>
                            checkboxListTileValue = newValue!,
                        title: Text(
                          "test of text",
                          style: const TextStyle(

                              // fontSize: 22.0,
                              // fontWeight: FontWeight.bold
                              ),
                        ),
                       
                      ),
                    ),
  }
}

Upvotes: 2

Hosam Hasan
Hosam Hasan

Reputation: 692

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

Upvotes: 9

Related Questions