Skip to main content

CwRadioButtonWidget Documentation

Overview​

The CwRadioButtonWidget is a concrete implementation of the CwRadioButton abstract class that creates a basic, customizable radio button with animated selection states. This class provides the core implementation used by the factory constructor CwRadioButton.widget().

Class Definition​

CwRadioButtonWidget​

Renders a circular radio button with customizable appearance and animated state transitions.

Parameters​

  • key: Widget key for identification
  • onChange: Callback function triggered when the radio button state changes
  • isSelected: Current selection state of the radio button
  • padding: Padding around the radio button (default: EdgeInsets.only(right: PaddingConst.pad_8))
  • selectedColor: Color when the radio button is selected (default: ColorConst.uiBlueColor)
  • unSelectedColor: Color when the radio button is unselected (default: Colors.black)
  • radioButtonSize: Size of the radio button (default: 18.0)

Implementation Details​

The widget implements the build method to construct the radio button UI:

  • Uses GestureDetector to handle tap events
  • Implements AnimatedContainer for smooth state transitions
  • Applies circular BoxDecoration for both outer border and inner fill
  • Conditionally renders the inner circle based on selection state

Visual Appearance​

  • Unselected: Empty circle with colored border
  • Selected: Circle with colored border and filled inner circle
  • Transitions between states are animated for a polished user experience

Usage Example​

CwRadioButtonWidget(
  onChange: (isSelected) => setState(() {
    // Toggle selection state
    this.isSelected = !isSelected;
  }),
  isSelected: isSelected,
  selectedColor: Colors.blue,
  unSelectedColor: Colors.grey,
  radioButtonSize: 24,
  padding: EdgeInsets.all(4),
)

Animation Properties​

  • Duration: 500 milliseconds
  • Animation curve: Curves.fastLinearToSlowEaseIn
  • Animated properties: Color transitions between states

Source Code​

This class is an integral part of the CodeWave UI components library. The complete implementation can be found in the cw_radio_button.dart file.

GitHub Repository