Skip to main content

CwCheckBoxWidget Documentation

Overview​

The CwCheckBoxWidget is a customizable checkbox widget that extends the CwCheckBox class. It provides a flexible and animated checkbox with extensive styling options, allowing developers to create visually appealing and interactive checkboxes.

Parameters Explanation​

Required Parameters​

  • onChange (required): A callback function triggered when the checkbox state changes.
  • isChecked (required): Boolean value representing the current checked state of the checkbox.

Optional Styling Parameters​

  • checkBoxSize: Defines the size of the checkbox (defaults to 18).
  • iconSize: Size of the icon displayed when the checkbox is checked (defaults to 16).
  • backgroundColor: Background color of the checkbox.
  • iconColor: Color of the icon when the checkbox is checked.
  • icon: IconData to be displayed when the checkbox is checked (defaults to standard checkbox icon).
  • iconWidget: Custom widget to replace the default icon.
  • checkBoxBorderRadius: Border radius of the checkbox (defaults to RadiusConst.rad_5).
  • borderColor: Color of the checkbox border (defaults to black).
  • checkBoxBorder: Custom border styling for the checkbox.

Usage Examples​

1. Basic Checkbox with Default Styling​

A simple checkbox with minimal configuration.

CwCheckBoxWidget(
  onChange: (isChecked) => print('Checkbox changed: $isChecked'),
  isChecked: false,
)

2. Customized Checkbox with Color and Icon​

A checkbox with custom background, icon, and size.

CwCheckBoxWidget(
  onChange: (isChecked) => print('Checkbox changed: $isChecked'),
  isChecked: true,
  backgroundColor: Colors.blue.shade100,
  iconColor: Colors.blue,
  icon: Icons.check,
  checkBoxSize: 24,
  iconSize: 20,
)

3. Checkbox with Custom Border and Icon Widget​

A checkbox with a custom border and a custom icon widget.

CwCheckBoxWidget(
  onChange: (isChecked) => print('Checkbox changed: $isChecked'),
  isChecked: false,
  checkBoxBorder: Border.all(color: Colors.green, width: 2),
  iconWidget: Icon(
    Icons.star,
    color: Colors.purple,
    size: 18,
  ),
  checkBoxBorderRadius: 10,
)

Key Features​

  • Animated state changes
  • Flexible styling options
  • Customizable icon and background
  • Responsive design with adjustable sizes

Animated Behavior​

The checkbox uses AnimatedContainer with the following properties:

  • Duration: 500 milliseconds
  • Curve: Curves.fastLinearToSlowEaseIn
  • Smoothly transitions between checked and unchecked states

Source Code Repository​

Find the full source code on GitHub: GitHub Repository