TButtonGroup class

A group of connected buttons with shared styling.

TButtonGroup displays multiple buttons as a unified component with:

  • Shared theme and styling
  • Connected appearance (no gaps between buttons)
  • Optional boxed mode with container
  • Customizable alignment
  • Individual button customization
  • Cycle Mode: Show only one button at a time, cycling through items on tap.
  • Stateful Selection: Maintain active state and highlight selected buttons when cycle is false.

Basic Usage

TButtonGroup(
  items: [
    TButtonGroupItem(text: 'Left', onPressed: () {}),
    TButtonGroupItem(text: 'Center', onPressed: () {}),
    TButtonGroupItem(text: 'Right', onPressed: () {}),
  ],
)

Cycle Mode (Show Single Button & Cycle on Tap)

TButtonGroup(
  cycle: true,
  onIndexChanged: (index) => print('Cycled to item $index'),
  items: [
    TButtonGroupItem(icon: Icons.play_arrow, text: 'Play'),
    TButtonGroupItem(icon: Icons.pause, text: 'Pause'),
    TButtonGroupItem(icon: Icons.stop, text: 'Stop'),
  ],
)

Stateful Selection Mode

TButtonGroup(
  initialIndex: 0,
  onIndexChanged: (index) => print('Selected item $index'),
  items: [
    TButtonGroupItem(text: 'Option A'),
    TButtonGroupItem(text: 'Option B'),
    TButtonGroupItem(text: 'Option C'),
  ],
)

See also:

Inheritance
Available extensions

Constructors

TButtonGroup({Key? key, TButtonGroupTheme? theme, TButtonGroupType? type, Color? color, TButtonSize? size, List<TButtonGroupItem> items = const [], WrapAlignment alignment = WrapAlignment.start, bool cycle = false, int? initialIndex, ValueChanged<int>? onIndexChanged})
Creates a button group.
const

Properties

alignment WrapAlignment
Alignment of the button group.
final
color Color?
The color scheme for the button group.
final
cycle bool
Whether to show only one button at a time and cycle through the items on tap.
final
hashCode int
The hash code for this object.
no setterinherited
initialIndex int?
The initial index of the item to show when cycle is true, or the active item index when cycle is false.
final
items List<TButtonGroupItem>
The list of button items to display.
final
key Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onIndexChanged ValueChanged<int>?
Callback fired when the active index changes (triggered in both cycle mode and stateful selection mode).
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
size TButtonSize?
The size of buttons in the group.
final
theme TButtonGroupTheme?
Custom theme for the button group.
final
type TButtonGroupType?
The visual style of the button group.
final

Methods

box({double minW = 0.0, double minH = 0.0, double maxW = double.infinity, double maxH = double.infinity}) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a ConstrainedBox to apply layout constraints.
center({bool when = true}) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a Center widget.
createElement() StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() State<TButtonGroup>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
estimateWidth(BuildContext context) double

Available on TButtonGroup, provided by the TButtonGroupWidthX extension

expanded({int flex = 1}) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in an Expanded widget.
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
padding([double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0]) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a Padding with flexible edge control.
paddingSymmetric({double h = 0.0, double v = 0.0}) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a Padding with symmetric horizontal and vertical spacing.
size({double? w, double? h}) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a SizedBox to apply fixed width and/or height.
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) String
Returns a one-line detailed description of the object.
inherited
toStringShort() String
A short, textual description of this widget.
inherited
visible(bool visible, {bool maintainState = false}) Widget

Available on Widget, provided by the WidgetX extension

Wraps this widget in a Visibility widget.
when(bool condition) Widget

Available on Widget, provided by the WidgetX extension

Returns this widget if condition is true, otherwise returns SizedBox.shrink(). Usage: Text('Hello').when(isVisible)

Operators

operator ==(Object other) bool
The equality operator.
inherited