CustomCheckbox

A customizable checkbox component with smooth animations and flexible styling options.

Features

• Visual Customization:
  • Custom active/inactive colors
  • Adjustable size and border radius
  • Custom check/unchecked icons
  • Flexible label styling
• Interactive Elements:
  • Smooth state transition animations
  • Custom tap handling
• Layout Control:
  • Configurable padding
  • Flexible sizing
• Accessibility:
  • Clear visual state indication
  • Customizable touch target

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_checkbox: ^0.0.2

Basic Usage

bool isChecked = false;

CustomCheckbox(
  value: isChecked,
  onChanged: (newValue) => setState(() => isChecked = newValue),
  label: "I agree to terms",
)

Complete Example

Column(
  children: [
    // Basic checkbox
    CustomCheckbox(
      value: _option1,
      onChanged: (val) => setState(() => _option1 = val),
      label: "Basic Option",
    ),

    // Custom styled checkbox
    CustomCheckbox(
      value: _option2,
      onChanged: (val) => setState(() => _option2 = val),
      label: "Premium Option",
      activeColor: Colors.purple,
      checkColor: Colors.white,
      size: 30,
      borderRadius: 8,
    ),

    // Custom icon checkbox
    CustomCheckbox(
      value: _option3,
      onChanged: (val) => setState(() => _option3 = val),
      label: "Custom Icons",
      checkedWidget: Icon(Icons.done_all, color: Colors.green),
      unCheckedWidget: Icon(Icons.close, color: Colors.red),
    ),
  ],
)

Parameter Reference

Core Properties

Parameter	Type	Required	Description
value	bool	Yes	Current checked state
onChanged	ValueChanged<bool>	Yes	State change callback
label	String	Yes	Text label

Visual Customization

Parameter	Type	Default	Description
activeColor	Color	Colors.blue	Color when checked
checkColor	Color	Colors.white	Check icon color
size	double	24.0	Checkbox size
borderRadius	double	6.0	Corner radius
checkedWidget	Widget?	null	Custom checked state widget
unCheckedWidget	Widget?	null	Custom unchecked state widget

Layout Options

Parameter	Type	Default	Description
padding	EdgeInsets	EdgeInsets.all(8)	Label padding

Advanced Usage

With Custom Icons

CustomCheckbox(
  value: _useDarkMode,
  onChanged: (val) => setState(() => _useDarkMode = val),
  label: "Dark Mode",
  checkedWidget: Icon(Icons.dark_mode, color: Colors.black),
  unCheckedWidget: Icon(Icons.light_mode, color: Colors.amber),
)

In a Form

Form(
  child: Column(
    children: [
      CustomCheckbox(
        value: _acceptTerms,
        onChanged: (val) => setState(() => _acceptTerms = val),
        label: "I accept the terms and conditions",
        activeColor: Colors.green,
      ),
      ElevatedButton(
        onPressed: _acceptTerms ? _submitForm : null,
        child: Text("Continue"),
      ),
    ],
  ),
)

With Rich Text Label

CustomCheckbox(
  value: _newsletterOptIn,
  onChanged: (val) => setState(() => _newsletterOptIn = val),
  label: "Subscribe to newsletter",
  padding: EdgeInsets.zero,
  labelWidget: RichText(
    text: TextSpan(
      text: "I agree to the ",
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(
          text: "Terms of Service",
          style: TextStyle(
            color: Colors.blue,
            decoration: TextDecoration.underline,
          ),
          recognizer: TapGestureRecognizer()..onTap = () => _showTerms(),
        ),
      ],
    ),
  ),
)

Best Practices

1. Accessibility:

   • Ensure sufficient contrast between states
   • Provide clear labels
   • Maintain minimum touch target size (48x48dp)

2. Performance:

   • Avoid unnecessary rebuilds
   • Use const constructors for static elements

3. Internationalization:

   • Localize checkbox labels
   • Consider RTL (right-to-left) layouts

4. State Management:

   • For complex apps, consider using state management solutions
   • Persist checkbox state when needed

Comparison with Flutter's Checkbox

Feature	CustomCheckbox	Flutter Checkbox
Custom Icons	Yes	No
Label Integration	Built-in	Requires separate widget
Color Customization	Full control	Limited
Shape Customization	Yes	No
Animation	Customizable	Material default
Size Control	Full control	Fixed