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:
- TButton for individual buttons
- TButtonGroupItem for item configuration
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- TButtonGroup
- 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 ifconditionis true, otherwise returns SizedBox.shrink(). Usage: Text('Hello').when(isVisible)
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited