MiCheckbox

The MiCheckbox component is a Flutter widget for creating interactive checkboxes with optional labels and action capabilities.

Overview

MiCheckbox extends MiStatelessWidget, serving as a customizable checkbox component. It allows users to toggle a boolean state, which can be linked to a key in the state. The checkbox can also display a label, and it supports action execution upon interaction.

Component Name: checkbox

JSON key: "component": "checkbox"

Parameters

Parameter Key	JSON Value Type	Flutter Type	Description	Default Value	Nullable	Requires Build
value	String	bool	The key representing the checkbox's state in the page's state. When the checkbox is toggled, the value associated with this key is updated to reflect the new state (true/false). This key should be formatted as ${key} (e.g., ${active}).	None	No	No
label	String	String	The text label displayed next to the checkbox. If not provided, the checkbox will be rendered without a label.	None	Yes	No
action	dynamic	dynamic	A JSON action that is executed when the checkbox is clicked. This allows for additional behaviors or state updates beyond the checkbox's inherent functionality.	None	Yes	No
color	String	Color	The color of the checkbox when active. Accepts Flutter color names or hex codes.	Theme default color	Yes	No
width	num (Number)	double	The width of the checkbox component.	None (Intrinsic width)	Yes	No
height	num (Number)	double	The height of the checkbox component.	None (Intrinsic height)	Yes	No
padding	List<num>	EdgeInsets	Padding to be applied around the checkbox. Expects a list of numbers representing padding values (e.g., [left, top, right, bottom]).	None	Yes	No
margin	List<num>	EdgeInsets	Margin to be applied around the checkbox. Expects a list of numbers representing margin values (e.g., [left, top, right, bottom]).	None	Yes	No
alignment	String	AlignmentGeometry	How the checkbox should be aligned within its allocated space. Accepts alignment keywords like 'topLeft', 'center', 'bottomRight', etc. Refer to Flutter's Alignment documentation.	Defaults to topLeft	Yes	No

Note:

• Action-Driven Behavior: The MiCheckbox component is designed to trigger actions when interacted with. The action parameter allows for executing additional logic beyond the checkbox's state change. When the checkbox is clicked, it invokes the action defined in the action parameter, which can be a JSON object specifying the action type and parameters.
• State Management Integration: The value parameter represents a key in the application's state management system. When the checkbox is toggled, the value associated with this key is updated to reflect the new checkbox state (true or false).
• Inherited Parameters: The color, alignment, width, height, padding, and margin parameters are inherited from MiStatelessWidget.
• Styling and Layout Flexibility: The MiCheckbox component allows for customization of its appearance and layout through inherited parameters.

Example JSON Configurations

Example 1: Basic Checkbox without Label

{
    "component": "checkbox",
    "value": "${active}",
    "action": {
        "actionType": "customAction"
    }
}

Explanation of Example 1:

• component: "checkbox" - Identifies this configuration as being for a MiCheckbox component.
• value: "${active}" - Sets the checkbox's state to be linked with the key ${active}. When toggled, the state of ${active} will be updated to reflect the checkbox's new value (true or false).
• action - Defines the action to be executed when the checkbox is clicked.

Example 2: Checkbox with Label

{
    "component": "checkbox",
    "value": "${notificationsEnabled}",
    "label": "Enable Notifications",
    "action": {
        "actionType": "customAction"
    }
}

Explanation of Example 2:

• component: "checkbox" - Identifies this configuration as being for a MiCheckbox component.
• value: "${notificationsEnabled}" - Links the checkbox's state to the key ${notificationsEnabled}. The checkbox will reflect the current state of this key, and toggling it will update the key accordingly.
• label: "Enable Notifications" - Provides a label for the checkbox, enhancing user understanding of its purpose.
• action - Specifies the action to be executed when the checkbox is clicked.