CheckboxAppi

A customizable checkbox widget with enhanced styling and interaction capabilities for Flutter applications.

Features

• Custom Styling: Configurable colors, sizes, and border styles
• Interactive States: Hover effects and tap animations
• Flexible Layout: Optional label text with customizable positioning
• Accessibility: Built-in accessibility support
• State Management: Easy value change handling

Usage

CheckboxAppi(
  value: isChecked,
  onChanged: (bool? newValue) {
    setState(() {
      isChecked = newValue ?? false;
    });
  },
  label: 'Accept terms and conditions',
)

Parameters

Parameter	Type	Description
value	bool	Required. Current state of the checkbox
onChanged	ValueChanged<bool?>?	Required. Callback when checkbox state changes
label	String?	Optional text label displayed next to checkbox
activeColor	Color?	Color when checkbox is checked (default: primary color)
checkColor	Color?	Color of the checkmark (default: white)
focusColor	Color?	Color when checkbox is focused
hoverColor	Color?	Color when checkbox is hovered
overlayColor	MaterialStateProperty<Color?>?	Color for different interaction states
splashRadius	double?	Radius of the splash effect
materialTapTargetSize	MaterialTapTargetSize?	Size of the tap target
visualDensity	VisualDensity?	Visual density for spacing
focusNode	FocusNode?	Focus node for keyboard navigation
autofocus	bool	Whether to autofocus (default: false)
shape	OutlinedBorder?	Custom shape for the checkbox
side	BorderSide?	Border style for the checkbox

Examples

Basic Checkbox

bool isAccepted = false;

CheckboxAppi(
  value: isAccepted,
  onChanged: (bool? value) {
    setState(() {
      isAccepted = value ?? false;
    });
  },
  label: 'I agree to the terms',
)

Custom Styled Checkbox

CheckboxAppi(
  value: isSelected,
  onChanged: (bool? value) {
    setState(() {
      isSelected = value ?? false;
    });
  },
  label: 'Enable notifications',
  activeColor: Colors.green,
  checkColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(4),
  ),
)

Checkbox with Custom Border

CheckboxAppi(
  value: isEnabled,
  onChanged: (bool? value) {
    setState(() {
      isEnabled = value ?? false;
    });
  },
  label: 'Advanced settings',
  side: BorderSide(
    color: Colors.blue,
    width: 2,
  ),
  splashRadius: 20,
)

Disabled Checkbox

CheckboxAppi(
  value: true,
  onChanged: null, // Disabled
  label: 'This option is disabled',
)

Best Practices

• Always provide an onChanged callback unless the checkbox should be disabled
• Use clear, descriptive labels that explain what the checkbox controls
• Consider using MaterialStateProperty for complex styling needs
• Group related checkboxes using CheckboxListTile for better organization
• Ensure sufficient tap target size for accessibility (minimum 44x44 pixels)