TTabs<T> class

A tab navigation component with indicator.

TTabs provides tab navigation with:

  • Icon and/or text tabs
  • Active indicator line
  • Disabled state support
  • Inline or full-width layout
  • Horizontal or vertical orientation
  • Scrollable mode with navigation controls
  • Wrap mode for multi-line layout
  • Custom tab builder support
  • Custom colors

Basic Usage

TTabs<int>(
  tabs: [
    TTab(value: 0, text: 'Home', icon: Icons.home),
    TTab(value: 1, text: 'Profile', icon: Icons.person),
    TTab(value: 2, text: 'Settings', icon: Icons.settings),
  ],
  selectedValue: currentTab,
  onTabChanged: (value) => setState(() => currentTab = value),
)

Scrollable Tabs with Navigation

TTabs<int>(
  tabs: manyTabs,
  selectedValue: currentTab,
  onTabChanged: (value) => setState(() => currentTab = value),
  scrollable: true,
  showNavigationButtons: true,
)

Vertical Tabs

TTabs<String>(
  tabs: tabs,
  selectedValue: selectedTab,
  onTabChanged: (value) => loadData(value),
  axis: Axis.vertical,
)

Wrap Mode

TTabs<String>(
  tabs: tabs,
  selectedValue: selectedTab,
  onTabChanged: (value) => loadData(value),
  inline: true,
  wrap: true,
)

Custom Tab Builder

TTabs<String>(
  tabs: tabs,
  selectedValue: selectedTab,
  onTabChanged: (value) => loadData(value),
  tabBuilder: (context, tab, isSelected) {
    return CustomTabWidget(tab: tab, isSelected: isSelected);
  },
)

Type parameter:

  • T: The type of tab values

See also:

  • TTab for tab configuration
Inheritance

Constructors

TTabs({Key? key, required List<TTab<T>> tabs, TTabController<T>? controller, T? selectedValue, ValueChanged<T>? onTabChanged, Color? borderColor, Color? selectedColor, Color? unselectedColor, Color? disabledColor, Color? indicatorColor, EdgeInsets? tabPadding, double tabSpacing = 2, double tabRunSpacing = 2, double? indicatorWidth = 1, bool inline = false, Axis axis = Axis.horizontal, bool scrollable = false, bool showNavigationButtons = true, bool wrap = false, Widget tabBuilder(BuildContext context, TTab<T> tab, bool isSelected)?, Color? navigationButtonColor, Color? navigationButtonBackgroundColor})
Creates a tabs component.
const

Properties

axis → Axis
The axis along which the tabs are laid out.
final
borderColor → Color?
Border color for the tab bar.
final
controller → TTabController<T>?
Optional controller for managing tab state.
final
disabledColor → Color?
Color for disabled tabs.
final
hashCode → int
The hash code for this object.
no setterinherited
indicatorColor → Color?
Color for the selection indicator.
final
indicatorWidth → double?
Width of the selection indicator.
final
inline → bool
Whether to use inline layout instead of full-width.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
Background color for navigation buttons.
final
Color for navigation buttons.
final
onTabChanged → ValueChanged<T>?
Callback fired when a tab is selected.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scrollable → bool
Whether tabs should be scrollable. When true, tabs can be scrolled with swipe gestures and navigation buttons.
final
selectedColor → Color?
Color for the selected tab.
final
selectedValue → T?
The currently selected tab value.
final
showNavigationButtons → bool
Whether to show navigation buttons in scrollable mode. Only shown on desktop/web platforms.
final
tabBuilder → Widget Function(BuildContext context, TTab<T> tab, bool isSelected)?
Custom builder for tab widgets. When provided, this builder is used instead of the default tab rendering. Receives the tab, whether it's selected, and should return a widget.
final
tabPadding → EdgeInsets?
Padding for each tab.
final
tabRunSpacing → double
final
tabs → List<TTab<T>>
The list of tabs to display.
final
tabSpacing → double
Spacing for each tab
final
unselectedColor → Color?
Color for unselected tabs.
final
wrap → bool
Whether to wrap tabs into multiple lines when using inline mode. Mutually exclusive with scrollable mode.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<TTabs<T>>
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
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
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

Operators

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