Skip to main content

CwToggleButtonWidget Documentation

Overview​

CwToggleButtonWidget is a stateful widget that extends the CwToggleButton. It provides a customizable toggle button with animations, allowing users to toggle between two states with dynamic visual changes. It supports various styling options, including text, colors, icons, and borders. This widget also provides animations for the thumb position and text alignment.

Public Properties​

  • value: The current state of the toggle button (true for active, false for inactive).
  • height: The height of the toggle button (default: 35).
  • fontSize: The font size for the toggle button text (default: 16).
  • onChanged: A callback function that triggers when the toggle value changes. It takes a bool parameter indicating the new state.
  • activeColor: The background color when the toggle is active (default: Colors.blue).
  • inactiveColor: The background color when the toggle is inactive (default: Colors.grey).
  • activeText: The text displayed when the toggle is active (default: 'On').
  • inactiveText: The text displayed when the toggle is inactive (default: 'Off').
  • activeTextColor: The color of the active text (default: Colors.white).
  • inactiveTextColor: The color of the inactive text (default: Colors.white).
  • activeThumbColor: The color of the thumb (circle) when the toggle is active (default: Colors.white).
  • inactiveThumbColor: The color of the thumb (circle) when the toggle is inactive (default: Colors.white).
  • activeTooltip: The tooltip message displayed when the toggle is active.
  • inactiveTooltip: The tooltip message displayed when the toggle is inactive.
  • activeThumbIcon: Custom icon displayed within the thumb when the toggle is active.
  • inactiveThumbIcon: Custom icon displayed within the thumb when the toggle is inactive.
  • activeBorder: Border around the toggle when it is active.
  • inactiveBorder: Border around the toggle when it is inactive.

Private Properties​

  • _activeTextWidget: A Text widget that displays the active state text.
  • _inactiveTextWidget: A Text widget that displays the inactive state text.
  • _spaceRequiredForText: The width required to display the text, calculated from the activeText and inactiveText.

Constructor​

CwToggleButtonWidget({
  super.key,
  required this.value,
  required this.onChanged,
  this.height = 35,
  this.fontSize = 16,
  this.activeColor = Colors.blue,
  this.inactiveColor = Colors.grey,
  this.activeText = 'On',
  this.inactiveText = 'Off',
  this.activeTextColor = Colors.white,
  this.inactiveTextColor = Colors.white,
  this.activeThumbColor = Colors.white,
  this.inactiveThumbColor = Colors.white,
  this.activeTooltip = "",
  this.inactiveTooltip = "",
  this.activeThumbIcon,
  this.inactiveThumbIcon,
  this.activeBorder,
  this.inactiveBorder,
});

Description:​

The constructor allows for customization of the toggle button, including the state text, colors, and icons. It also calculates the space required to display the text and initializes the associated properties.

Methods​

_textSize​

Size _textSize(Text text)

Description:​

A helper method used to calculate the width of a given text widget, which is crucial for determining the total width of the toggle button widget.

Parameters:​

  • text: The Text widget whose size is to be measured.

Returns:​

  • A Size object representing the width of the text widget.

createState​

State<CwToggleButtonWidget> createState() => _CwToggleButtonWidgetState();

Description:​

Overrides the createState method from CwToggleButton, creating the state for the widget.

State Class: _CwToggleButtonWidgetState​

initState​

void initState()

Description:​

Initial setup of the widget's animation controller. The controller manages the animation of the toggle's thumb position based on the state of the toggle button.

build​

Widget build(BuildContext context)

Description:​

Builds the UI for the toggle button, including the animated thumb, active/inactive text, and background color. It listens for tap gestures to trigger the onChanged callback and toggle the button's state.

Usage Example​

Basic Usage of CwToggleButtonWidget​

CwToggleButtonWidget(
  value: true,
  onChanged: (newValue) {
    print("Toggle value: $newValue");
  },
  activeText: 'Enabled',
  inactiveText: 'Disabled',
  activeColor: Colors.green,
  inactiveColor: Colors.red,
  activeThumbColor: Colors.white,
  inactiveThumbColor: Colors.black,
)

Toggle Button with Icons and Custom Tooltips​

CwToggleButtonWidget(
  value: false,
  onChanged: (newValue) {
    print("Toggle value: $newValue");
  },
  activeThumbIcon: Icon(Icons.check),
  inactiveThumbIcon: Icon(Icons.close),
  activeTooltip: "Turn On",
  inactiveTooltip: "Turn Off",
)

Source Code Repository​

Find the full source code on GitHub:
GitHub Repository