Skip to main content

CwRadioButtonCard Documentation

Overview​

The CwRadioButtonCard is a versatile radio button component that combines a radio button with a customizable card-like container. It extends the CwRadioButton class and provides extensive options for styling, positioning, and interaction.

Parameters Explanation​

Required Parameters​

  • onChange (required): A callback function triggered when the radio button state changes.
  • isSelected (required): Boolean value representing the current selected state.
  • radioWidget (required): The widget representing the radio button.
  • radioCardHeight (required): Height of the radio button card.
  • radioCardWidth (required): Width of the radio button card.

Optional Parameters​

  • child: Optional content to be displayed inside the radio button card.
  • radioPosition: Determines the positioning of the radio button within the card (default: RadioPosition.leadingTop).
    • Options include:
      • leadingTop
      • trailingTop
      • leadingCenter
      • trailingCenter
      • leadingBottom
      • trailingBottom

Styling Parameters​

  • radioCardpadding: Custom padding for the radio button card (defaults to PaddingConst.pad_12).
  • radioCardBackgroundColor: Background color of the radio button card.
  • radioCardGradient: Optional gradient background for the radio button card.
  • radioCardBorder: Custom border styling for the radio button card.
  • radioCardBorderRadius: Border radius to customize the card's shape.

Usage Examples​

1. Basic Radio Button Card with Default Positioning​

A simple radio button card with minimal configuration.

CwRadioButtonCard(
  onChange: (isSelected) => print('Radio Button Card changed: $isSelected'),
  isSelected: false,
  radioWidget: Radio(value: false, groupValue: true, onChanged: (value) {}),
  radioCardHeight: 100,
  radioCardWidth: 200,
  child: Text('Radio Button Card Content'),
)

2. Customized Radio Button Card with Gradient and Trailing Position​

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

CwRadioButtonCard(
  onChange: (isSelected) => print('Radio Button Card changed: $isSelected'),
  isSelected: true,
  radioWidget: Radio(value: true, groupValue: true, onChanged: (value) {}),
  radioCardHeight: 150,
  radioCardWidth: 250,
  radioPosition: RadioPosition.trailingTop,
  radioCardGradient: LinearGradient(
    colors: [Colors.blue.shade100, Colors.blue.shade300],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  radioCardBorderRadius: BorderRadius.circular(15),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Advanced Radio Button Card'),
      Text('With custom styling'),
    ],
  ),
)

3. Radio Button Card with Custom Border and Centered Radio Button​

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

CwRadioButtonCard(
  onChange: (isSelected) => print('Radio Button Card changed: $isSelected'),
  isSelected: false,
  radioWidget: Radio(value: false, groupValue: true, onChanged: (value) {}),
  radioCardHeight: 120,
  radioCardWidth: 300,
  radioPosition: RadioPosition.leadingCenter,
  radioCardBorder: Border.all(color: Colors.green, width: 2),
  radioCardpadding: EdgeInsets.all(16),
  child: Text('Centered Radio Button Card'),
)

Radio Button Positioning​

The radioPosition parameter allows fine-grained control over radio button placement:

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

Source Code Repository​

Find the full source code on GitHub: GitHub Repository