Skip to main content

CwCheckBoxCard Documentation

Overview​

The CwCheckBoxCard is an advanced checkbox widget that combines a checkbox with a customizable card-like container. It extends the CwCheckBox class and provides extensive customization options for styling, positioning, and interaction.

Parameters Explanation​

Below are the parameters that can be passed to customize CwCheckBoxCard:

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.
  • checkBoxWidget (required): The widget representing the checkbox.
  • checkBoxCardHeight (required): Height of the checkbox card.
  • checkBoxCardWidth (required): Width of the checkbox card.

Optional Parameters​

  • checkBoxWidth: Width of the checkbox itself.
  • child: Optional content to be displayed inside the checkbox card.
  • checkBoxPosition: Determines the positioning of the checkbox within the card (default: CheckBoxPosition.leadingTop).
    • Options include:
      • leadingTop
      • trailingTop
      • leadingBottom
      • trailingBottom
      • leadingCenter
      • trailingCenter
  • checkBoxCardpadding: Custom padding for the checkbox card (defaults to PaddingConst.pad_12).
  • checkBoxCardBackgroundColor: Background color of the checkbox card.
  • checkBoxCardGradient: Optional gradient background for the checkbox card.
  • checkBoxCardBorder: Custom border styling for the checkbox card.
  • checkBoxCardBorderRadius: Border radius to customize the card's shape.

Usage Examples​

1. Basic Checkbox Card with Default Positioning​

A simple checkbox card with minimal configuration.

CwCheckBoxCard(
  onChange: (isChecked) => print('Checkbox changed: $isChecked'),
  isChecked: false,
  checkBoxWidget: Checkbox(value: false, onChanged: (value) {}),
  checkBoxCardHeight: 100,
  checkBoxCardWidth: 200,
  child: Text('Checkbox Card Content'),
)

2. Customized Checkbox Card with Gradient and Trailing Position​

A checkbox card with a gradient background and checkbox positioned at the top-right.

CwCheckBoxCard(
  onChange: (isChecked) => print('Checkbox changed: $isChecked'),
  isChecked: true,
  checkBoxWidget: Checkbox(value: true, onChanged: (value) {}),
  checkBoxCardHeight: 150,
  checkBoxCardWidth: 250,
  checkBoxPosition: CheckBoxPosition.trailingTop,
  checkBoxCardGradient: LinearGradient(
    colors: [Colors.blue.shade100, Colors.blue.shade300],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  checkBoxCardBorderRadius: BorderRadius.circular(15),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Advanced Checkbox Card'),
      Text('With custom styling'),
    ],
  ),
)

3. Checkbox Card with Custom Border and Centered Checkbox​

A checkbox card with a border and checkbox positioned at the center-left.

CwCheckBoxCard(
  onChange: (isChecked) => print('Checkbox changed: $isChecked'),
  isChecked: false,
  checkBoxWidget: Checkbox(value: false, onChanged: (value) {}),
  checkBoxCardHeight: 120,
  checkBoxCardWidth: 300,
  checkBoxPosition: CheckBoxPosition.leadingCenter,
  checkBoxCardBorder: Border.all(color: Colors.green, width: 2),
  checkBoxCardpadding: EdgeInsets.all(16),
  child: Text('Centered Checkbox Card'),
)

Checkbox Positioning​

The checkBoxPosition parameter allows fine-grained control over checkbox placement:

  • leadingTop: Checkbox at top-left
  • trailingTop: Checkbox at top-right
  • leadingBottom: Checkbox at bottom-left
  • trailingBottom: Checkbox at bottom-right
  • leadingCenter: Checkbox at center-left
  • trailingCenter: Checkbox at center-right

Source Code Repository​

Find the full source code on GitHub: GitHub Repository