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

modularuiwidgets

Checkbox

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.