CODEWITHSUNDEEP
flutterdart
krishnaji
krishnaji

Reputation: 1953

How to make checkbox shape to circular using flutter

Expecting the checkbox in circular shape with inside right tick mark

Upvotes: 5

Views: 11637

Answers (5)

Ilyas Arafath
Ilyas Arafath

Reputation: 681

We can use the shape attribute to make circle shape

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

Upvotes: 0

krishnaji
krishnaji

Reputation: 1953

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
(source: i2.wp.com)

Upvotes: 2

Mohsen Haydari
Mohsen Haydari

Reputation: 675

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

Upvotes: 6

MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2490

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

Upvotes: 0

Bharat Biswal
Bharat Biswal

Reputation: 1843

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

Upvotes: 4

Related Questions