Skip to main content

CwToggleButtonTile Documentation

Overview​

CwToggleButtonTile is a widget that combines a toggle button with customizable content layout. It allows you to display a toggle button along with other widgets, such as titles, subtitles, and additional leading or trailing elements. The toggle's position within the layout can be customized using the TogglePosition enum, offering flexibility in how the toggle button appears in relation to the content.

Public Properties​

  • title: An optional widget for the title text that appears at the top of the tile.
  • toggleWidget: The widget representing the toggle button itself (required).
  • subTitle: An optional widget for the subtitle text that appears below the title.
  • toggleTileHeight: The height of the tile (optional).
  • toggleTileWidth: The width of the tile (optional).
  • onChanged: A callback function triggered when the toggle state changes. It takes a bool parameter indicating the new state.
  • leadingWidget: An optional widget that appears at the beginning (leading side) of the tile.
  • trailingWidget: An optional widget that appears at the end (trailing side) of the tile.
  • contentWidget: An optional widget to replace the default content layout (title and subtitle).
  • togglePosition: Determines the position of the toggle button in the layout. It can be one of the following:
    • leadingTop: Positioned at the top-left.
    • trailingTop: Positioned at the top-right.
    • leadingCenter: Positioned at the center-left.
    • trailingCenter: Positioned at the center-right.
    • leadingBottom: Positioned at the bottom-left.
    • trailingBottom: Positioned at the bottom-right.
  • toggleTilePadding: Optional padding for the tile content (default: EdgeInsets.all(PaddingConst.pad_12)).
  • toggleTileBackgroundColor: Background color of the tile when no gradient is provided.
  • toggleTileGradient: Gradient background for the tile (optional).
  • toggleTileBorder: Border for the tile (optional).
  • toggleTileBorderRadius: Border radius for the tile (optional).

Constructor​

CwToggleButtonTile({
  super.key,
  required this.toggleWidget,
  this.toggleTileBackgroundColor,
  this.toggleTileGradient,
  this.toggleTileBorder,
  this.toggleTileBorderRadius,
  this.toggleTileHeight,
  this.toggleTileWidth,
  this.subTitle,
  this.leadingWidget,
  this.toggleTilepadding,
  this.trailingWidget,
  this.contentWidget,
  required this.onChanged,
  this.title,
  this.togglePosition = TogglePosition.trailingCenter,
});

Description:​

The constructor allows customization of the tile's appearance, including its size, background color, border, gradient, padding, and the position of the toggle button. It requires the toggleWidget (the toggle button) and the onChanged callback.

Enum: TogglePosition​

TogglePosition is an enum that defines the possible positions of the toggle button within the tile layout:

  • leadingTop: Places the toggle button at the top-left.
  • trailingTop: Places the toggle button at the top-right.
  • leadingCenter: Places the toggle button at the center-left.
  • trailingCenter: Places the toggle button at the center-right.
  • leadingBottom: Places the toggle button at the bottom-left.
  • trailingBottom: Places the toggle button at the bottom-right.

Methods​

crossAxisAlignment​

CrossAxisAlignment crossAxisAlignment()

Description:​

Determines the alignment of the children widgets inside the Row based on the togglePosition. It adjusts whether the children should align to the start, center, or end of the cross axis.

Returns:​

  • A CrossAxisAlignment value based on the togglePosition.

build​

Widget build(BuildContext context)

Description:​

The build method constructs the tile layout, including the toggle button and other child widgets. The toggle button’s position is determined by togglePosition, and the content is arranged accordingly.

Widget Helpers​

_toggleWidget​

Widget _toggleWidget() => widget.toggleWidget;

Description:​

Returns the toggle widget that is passed as a property. This widget represents the toggle button itself.

_contentBox​

Widget _contentBox() => widget.contentWidget ??
    Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        widget.title ?? const SizedBox(),
        widget.subTitle ?? const SizedBox(),
      ],
    );

Description:​

Returns the content of the tile, which consists of the title and subTitle by default. If a custom contentWidget is provided, it will be used instead.

_leadingWidget​

Widget _leadingWidget() => widget.leadingWidget ?? const SizedBox();

Description:​

Returns the leading widget if specified, otherwise returns an empty SizedBox.

_trailingWidget​

Widget _trailingWidget() => widget.trailingWidget ?? const SizedBox();

Description:​

Returns the trailing widget if specified, otherwise returns an empty SizedBox.

Usage Example​

Basic Usage of CwToggleButtonTile​

CwToggleButtonTile(
  toggleWidget: CwToggleButtonWidget(
    value: true,
    onChanged: (newValue) {
      print("Toggle value: $newValue");
    },
  ),
  title: Text("Title of the Tile"),
  subTitle: Text("Subtitle of the Tile"),
  onChanged: (newValue) {
    print("Tile toggle value: $newValue");
  },
  togglePosition: TogglePosition.leadingCenter,
)

Custom Tile with Leading Widget and Gradient Background​

CwToggleButtonTile(
  toggleWidget: CwToggleButtonWidget(
    value: false,
    onChanged: (newValue) {
      print("Toggle value: $newValue");
    },
  ),
  title: Text("Custom Tile"),
  leadingWidget: Icon(Icons.star),
  toggleTileBackgroundColor: Colors.blue,
  toggleTileGradient: LinearGradient(
    colors: [Colors.blue, Colors.green],
  ),
  onChanged: (newValue) {
    print("Toggle state: $newValue");
  },
  togglePosition: TogglePosition.trailingBottom,
)

Source Code Repository​

Find the full source code on GitHub:
GitHub Repository