Skip to main content

​
HuxTabs

The HuxTabs component provides a clean and modern way to organize content into multiple panels with tab navigation. It supports multiple variants, sizes, and includes built-in theme awareness.

​
Basic Usage

import 'package:hux/hux.dart';

HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Overview',
      content: Text('Overview content goes here'),
    ),
    HuxTabItem(
      label: 'Settings',
      content: Text('Settings content goes here'),
    ),
    HuxTabItem(
      label: 'Profile',
      content: Text('Profile content goes here'),
    ),
  ],
  onTabChanged: (index) => print('Tab changed to $index'),
)

​
Variants

​
Default

The default variant displays tabs with an underline indicator. 
HuxTabs(
  variant: HuxTabVariant.default_,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
Pill

The pill variant displays tabs with a background indicator that highlights the active tab. 
HuxTabs(
  variant: HuxTabVariant.pill,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
Minimal

The minimal variant displays tabs without any indicator, relying on text color changes. 
HuxTabs(
  variant: HuxTabVariant.minimal,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
Sizes

​
Small

HuxTabs(
  size: HuxTabSize.small,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
Medium (Default)

HuxTabs(
  size: HuxTabSize.medium,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
Large

HuxTabs(
  size: HuxTabSize.large,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
With Icons

Add icons to your tabs for better visual hierarchy. 
HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Dashboard',
      icon: Icons.dashboard,
      content: Text('Dashboard content'),
    ),
    HuxTabItem(
      label: 'Settings',
      icon: Icons.settings,
      content: Text('Settings content'),
    ),
    HuxTabItem(
      label: 'Profile',
      icon: Icons.person,
      content: Text('Profile content'),
    ),
  ],
)

​
With Badges

Add badges to indicate notifications or counts. 
HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Messages',
      icon: Icons.message,
      badge: HuxBadge(
        text: '3',
        variant: HuxBadgeVariant.destructive,
      ),
      content: Text('Messages content'),
    ),
    HuxTabItem(
      label: 'Notifications',
      icon: Icons.notifications,
      badge: HuxBadge(
        text: '12',
        variant: HuxBadgeVariant.primary,
      ),
      content: Text('Notifications content'),
    ),
  ],
)

​
Scrollable Tabs

Enable horizontal scrolling for tabs that don’t fit in the available space. 
HuxTabs(
  isScrollable: true,
  tabs: List.generate(10, (index) => HuxTabItem(
    label: 'Tab ${index + 1}',
    content: Text('Content ${index + 1}'),
  )),
)

​
Tab Alignment

Control how tabs are aligned within the available space. 
HuxTabs(
  alignment: TabAlignment.center,
  tabs: [
    HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
    HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
  ],
)

​
Disabled Tabs

Mark individual tabs as disabled to prevent interaction. 
HuxTabs(
  tabs: [
    HuxTabItem(
      label: 'Available Tab',
      content: Text('This tab is available'),
    ),
    HuxTabItem(
      label: 'Disabled Tab',
      content: Text('This tab is disabled'),
      isDisabled: true,
    ),
  ],
)

​
Expanding Content

By default, tab content takes only the space it needs. Use expandContent to fill available vertical space. 
// Content fills available height
HuxTabs(
  expandContent: true,
  tabs: [
    HuxTabItem(
      label: 'Overview',
      content: Container(
        color: Colors.blue.shade100,
        child: Center(child: Text('Fills available space')),
      ),
    ),
    HuxTabItem(
      label: 'Settings',
      content: Container(
        color: Colors.green.shade100,
        child: Center(child: Text('Also fills available space')),
      ),
    ),
  ],
)
Set expandContent: true when tabs are in a bounded container (like an Expanded widget) and you want the content to fill available space. Leave it false (default) for better compatibility with unbounded layouts.

​
Controlled Tabs

Control the active tab programmatically. 
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _activeTab = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            HuxButton(
              onPressed: () => setState(() => _activeTab = 0),
              child: Text('Go to Tab 1'),
            ),
            SizedBox(width: 8),
            HuxButton(
              onPressed: () => setState(() => _activeTab = 1),
              child: Text('Go to Tab 2'),
            ),
          ],
        ),
        SizedBox(height: 16),
        HuxTabs(
          initialIndex: _activeTab,
          onTabChanged: (index) => setState(() => _activeTab = index),
          tabs: [
            HuxTabItem(label: 'Tab 1', content: Text('Content 1')),
            HuxTabItem(label: 'Tab 2', content: Text('Content 2')),
          ],
        ),
      ],
    );
  }
}

​
API Reference

​
HuxTabs

PropertyTypeDefaultDescription
tabsList<HuxTabItem>requiredList of tab items to display
initialIndexint0Initial active tab index
variantHuxTabVariantHuxTabVariant.default_Visual variant of the tabs
sizeHuxTabSizeHuxTabSize.mediumSize variant of the tabs
onTabChangedValueChanged<int>?nullCallback when the active tab changes
isScrollableboolfalseWhether tabs should be scrollable horizontally
alignmentTabAlignmentTabAlignment.startAlignment of tabs within the available space
expandContentboolfalseWhether content should expand to fill available vertical space

​
HuxTabItem

PropertyTypeDefaultDescription
labelStringrequiredThe text label displayed on the tab
contentWidgetrequiredThe content widget displayed when this tab is active
iconIconData?nullOptional icon displayed before the label
badgeWidget?nullOptional badge widget displayed after the label
isDisabledboolfalseWhether this tab is disabled

​
HuxTabVariant

  • HuxTabVariant.default_ - Default tabs with underline indicator
  • HuxTabVariant.pill - Pill-style tabs with background indicator
  • HuxTabVariant.minimal - Minimal tabs with no indicator

​
HuxTabSize

  • HuxTabSize.small - Small tabs for compact layouts
  • HuxTabSize.medium - Medium tabs for standard layouts (default)
  • HuxTabSize.large - Large tabs for prominent navigation

​
Theming

HuxTabs automatically adapts to light and dark themes using HuxTokens. The component uses the following design tokens:
  • HuxTokens.tabActiveBackground - Background color for active tab
  • HuxTokens.tabActiveText - Text color for active tab
  • HuxTokens.tabInactiveBackground - Background color for inactive tab
  • HuxTokens.tabInactiveText - Text color for inactive tab
  • HuxTokens.tabHoverBackground - Hover background color for tabs
  • HuxTokens.tabBorder - Border color for tab container
  • HuxTokens.tabIndicator - Indicator color for active tab
The tabs component follows Hux UI design principles with consistent spacing, typography, and color usage. All variants automatically adapt to your theme configuration.