CheckBox

CheckBox

MUICheckBox

A customizable checkbox widget with optional text that can also trigger the checkbox state change.

Properties

  • checked: bool - The state of the checkbox; either checked or not.

  • child: Widget - Typically a Text widget; the checkbox will also be checked if the child is tapped.

  • onChanged: Function(bool)? - Callback for when either the checkbox or the child is pressed.

  • fillColor: Color - The fill color of the checkbox shown when checked; default: Colors.black.

  • iconColor: Color - The color of the check icon inside the checkbox; default: Colors.white.

  • size: double - The size of the checkbox; default: 14.

  • borderRadius: double - The border radius of the checkbox; default: 4.

  • animationDuration: int - The duration between the checked and unchecked state in milliseconds; default: 100.

Example Usage

ValueNotifier<bool> checkedNotifier = ValueNotifier(true);

// inside build widget
ValueListenableBuilder(
          valueListenable: checkedNotifier,
          builder: (context, checked, child) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MUICheckBox(
                checked: checkedNotifier.value,
                onChanged: (value) {
                  checkedNotifier.value = value;
                },
                child: const Text(
                  "Accept Terms and conditions",
                  style: TextStyle(fontWeight: FontWeight.w500),
                ),
              ),
            ],
          ),
        ),

Notes

  • Displays a checkbox with optional text that triggers the checkbox state change.

  • Supports customization of checkbox size, colors, border radius, and animation duration.

  • Changes state when either the checkbox or the child is pressed.

  • Provides visual feedback on hover by changing the mouse cursor.

Last updated