Skip to main content

CwToggleButton Documentation

Overview​

CwToggleButton is a customizable toggle button widget for Flutter, designed to provide a simple way to display a switch between two states, such as "active" and "inactive". This widget is highly configurable, allowing you to adjust its size, colors, text, icons, and tooltips. It supports both a basic toggle button (CwToggleButton.widget) and a more complex toggle button embedded within a tile (CwToggleButton.tile).

Toggle Variants:​

  1. Basic Toggle Button (CwToggleButton.widget)
    A standalone toggle button that offers a clean and simple design for toggling between two states.

  2. Toggle Button with Tile Layout (CwToggleButton.tile)
    A toggle button integrated into a tile layout with additional customization options, such as title, subtitle, leading/trailing widgets, padding, and background color.

Parameters​

Common Parameters for Both Variants​

  • value: The current state of the toggle button (true for active, false for inactive).
  • onChanged: A callback function triggered when the toggle's value changes. It takes a bool parameter.
  • height: The height of the toggle button (default: 35).
  • fontSize: The font size for the text displayed on the toggle (default: 16).
  • 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: empty string).
  • inactiveText: The text displayed when the toggle is inactive (default: empty string).
  • activeTextColor: The color of the text when the toggle is active (default: Colors.white).
  • inactiveTextColor: The color of the text when the toggle is inactive (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 text displayed when the toggle is active.
  • inactiveTooltip: The tooltip text displayed when the toggle is inactive.
  • activeThumbIcon: Custom icon to display in the thumb when the toggle is active.
  • inactiveThumbIcon: Custom icon to display in 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.

Additional Parameters for CwToggleButton.tile​

  • contentWidget: Custom widget to display inside the toggle button tile.
  • title: The main title text to display in the tile.
  • subTitle: The subtitle text to display in the tile.
  • leadingWidget: A widget to display at the leading side of the tile.
  • trailingWidget: A widget to display at the trailing side of the tile.
  • toggleTilePadding: Padding for the toggle button tile.
  • toggleTileBackgroundColor: Background color for the toggle button tile.
  • toggleTileGradient: Gradient color for the background of the toggle button tile.
  • toggleTileHeight: Height of the toggle button tile.
  • toggleTileWidth: Width of the toggle button tile.
  • toggleTileBorderRadius: Border radius for the toggle button tile.
  • toggleTileBorder: Border for the toggle button tile.
  • togglePosition: Position of the toggle within the tile (default: TogglePosition.leadingTop).

Usage Examples​

1. Basic Toggle Button​

A simple toggle button with custom active and inactive colors and text.

CwToggleButton.widget(
  value: true,
  onChanged: (value) {
    print('Toggle value: $value');
  },
  activeColor: Colors.green,
  inactiveColor: Colors.red,
  activeText: 'On',
  inactiveText: 'Off',
)

2. Toggle Button with Icons and Tooltips​

A toggle button with custom thumb icons and tooltips for both states.

CwToggleButton.widget(
  value: true,
  onChanged: (value) {
    print('Toggle value: $value');
  },
  activeThumbIcon: Icon(Icons.check),
  inactiveThumbIcon: Icon(Icons.close),
  activeTooltip: 'Activated',
  inactiveTooltip: 'Deactivated',
)

3. Toggle Button within Tile Layout​

A toggle button integrated within a tile that includes a title, subtitle, and custom widgets.

CwToggleButton.tile(
  value: true,
  onChanged: (value) {
    print('Toggle value: $value');
  },
  title: Text('Main Toggle'),
  subTitle: Text('This is a subtitle'),
  leadingWidget: Icon(Icons.lightbulb),
  trailingWidget: Icon(Icons.settings),
  toggleTilePadding: EdgeInsets.all(10),
  toggleTileBackgroundColor: Colors.blue.shade50,
  toggleTileHeight: 50,
  toggleTileWidth: 200,
)

4. Toggle Button with Custom Border Radius and Gradient​

A toggle button within a tile layout that features a custom border radius and gradient background.

CwToggleButton.tile(
  value: true,
  onChanged: (value) {
    print('Toggle value: $value');
  },
  toggleTileBorderRadius: BorderRadius.circular(12),
  toggleTileGradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
  ),
)

Source Code Repository​

Find the full source code on GitHub:
GitHub Repository