Skip to main content

CwRadioTile Documentation

Overview​

The CwRadioTile is a versatile radio button component that provides a flexible layout for creating customizable radio button-based list tiles. It extends the CwRadioButton class and offers extensive customization options for styling, positioning, and content arrangement.

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.

Optional Parameters​

  • title: A widget displayed as the primary text/title of the tile.
  • subTitle: A widget displayed as secondary text beneath the title.
  • leadingWidget: A widget positioned before the main content.
  • trailingWidget: A widget positioned after the main content.
  • contentWidget: A custom widget to replace the default title and subtitle layout.
  • radioPosition: Determines the positioning of the radio button within the tile (default: RadioPosition.trailingCenter).
    • Options include:
      • leadingTop
      • trailingTop
      • leadingCenter
      • trailingCenter
      • leadingBottom
      • trailingBottom

Styling Parameters​

  • radioTileHeight: Height of the radio tile.
  • radioTileWidth: Width of the radio tile.
  • radioTilepadding: Custom padding for the radio tile (defaults to PaddingConst.pad_12).
  • radioTileBackgroundColor: Background color of the radio tile.
  • radioTileGradient: Optional gradient background for the radio tile.
  • radioTileBorder: Custom border styling for the radio tile.
  • radioTileBorderRadius: Border radius to customize the tile's shape.

Usage Examples​

1. Basic Radio Tile with Default Configuration​

A simple radio tile with title and subtitle.

CwRadioTile(
  onChange: (isSelected) => print('Radio tile changed: $isSelected'),
  isSelected: false,
  radioWidget: Radio(value: false, groupValue: true, onChanged: (value) {}),
  title: Text('Radio Tile Title'),
  subTitle: Text('Radio Tile Subtitle'),
)

2. Customized Radio Tile with Leading Widget​

A radio tile with a leading icon and custom positioning.

CwRadioTile(
  onChange: (isSelected) => print('Radio tile changed: $isSelected'),
  isSelected: true,
  radioWidget: Radio(value: true, groupValue: true, onChanged: (value) {}),
  radioPosition: RadioPosition.leadingTop,
  radioTileBackgroundColor: Colors.grey.shade200,
  leadingWidget: Icon(Icons.person, color: Colors.blue),
  title: Text('Profile Settings'),
  subTitle: Text('Manage your account preferences'),
  trailingWidget: Icon(Icons.arrow_forward_ios),
)

3. Radio Tile with Custom Content and Gradient​

A radio tile with a custom content widget and gradient background.

CwRadioTile(
  onChange: (isSelected) => print('Radio tile changed: $isSelected'),
  isSelected: false,
  radioWidget: Radio(value: false, groupValue: true, onChanged: (value) {}),
  radioPosition: RadioPosition.trailingCenter,
  radioTileGradient: LinearGradient(
    colors: [Colors.purple.shade100, Colors.purple.shade300],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  contentWidget: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('Advanced Settings', style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(height: 4),
      Text('Customize your advanced preferences'),
    ],
  ),
)

Radio Button Positioning​

The radioPosition parameter allows flexible 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