Tabs Wdiget

Estimated reading: 4 minutes 24 views

Tabs in FlutKit provide a structured way to organize related content within the same screen. They help reduce navigation complexity by grouping views under logical categories while maintaining a clean layout.

FlutKit offers two main tab components:

VerticalTabBar — ideal for dashboards and admin layouts
HorizontalTabBar — suitable for content pages and standard tab navigation

VerticalTabBar

Overview

VerticalTabBar displays tabs in a vertical navigation rail, commonly placed on the left side of the content area.
Each tab consists of an icon, a label, and an associated content widget.

This component is particularly useful for:

Admin dashboards
Settings pages
Multi-section tools with persistent navigation

Constructor

Dart

VerticalTabBar({
  Key? key,
  required List<VerticalTabItem> tabs,
  int initialIndex = 0,
  Color? selectedIconColor,
  Color? unselectedIconColor,
  Color? selectedTextColor,
  Color? unselectedTextColor,
  double? navigationRailWidth = 72,
  double? containerHeight = 400,
})

VerticalTabBar({
  Key? key,
  required List<VerticalTabItem> tabs,
  int initialIndex = 0,
  Color? selectedIconColor,
  Color? unselectedIconColor,
  Color? selectedTextColor,
  Color? unselectedTextColor,
  double? navigationRailWidth = 72,
  double? containerHeight = 400,
})

Parameters Explanation

Parameter	Description
`tabs`	List of `VerticalTabItem` defining each tab
`initialIndex`	Index of the initially selected tab
`selectedIconColor`	Icon color for the active tab
`unselectedIconColor`	Icon color for inactive tabs
`selectedTextColor`	Label color for the active tab
`unselectedTextColor`	Label color for inactive tabs
`navigationRailWidth`	Width of the vertical navigation rail
`containerHeight`	Height of the entire tab container

VerticalTabItem Model

Dart

class VerticalTabItem {
  final IconData icon, selectedIcon;
  final String label;
  final Widget content;

  VerticalTabItem({
    required this.icon,
    required this.selectedIcon,
    required this.label,
    required this.content,
  });
}

class VerticalTabItem {
  final IconData icon, selectedIcon;
  final String label;
  final Widget content;

  VerticalTabItem({
    required this.icon,
    required this.selectedIcon,
    required this.label,
    required this.content,
  });
}

Model Fields

Field	Description
`icon`	Icon displayed when tab is inactive
`selectedIcon`	Icon displayed when tab is active
`label`	Text label of the tab
`content`	Widget rendered when the tab is selected

Basic Example

Dart

VerticalTabBar(
  tabs: [
    VerticalTabItem(
      icon: Icons.dashboard_outlined,
      selectedIcon: Icons.dashboard,
      label: 'Dashboard',
      content: Text('Dashboard Content'),
    ),
    VerticalTabItem(
      icon: Icons.settings_outlined,
      selectedIcon: Icons.settings,
      label: 'Settings',
      content: Text('Settings Content'),
    ),
  ],
);

VerticalTabBar(
  tabs: [
    VerticalTabItem(
      icon: Icons.dashboard_outlined,
      selectedIcon: Icons.dashboard,
      label: 'Dashboard',
      content: Text('Dashboard Content'),
    ),
    VerticalTabItem(
      icon: Icons.settings_outlined,
      selectedIcon: Icons.settings,
      label: 'Settings',
      content: Text('Settings Content'),
    ),
  ],
);

HorizontalTabBar

Overview

HorizontalTabBar renders tabs in a horizontal layout, typically placed at the top of a content section. It supports multiple styles, including pill-style tabs, custom indicators, and scrollable tab headers.

This component is suitable for:

Content-heavy pages
Reports and analytics views
Section-based navigation within a page

Constructor

Dart

HorizontalTabBar({
  Key? key,
  required List<TabBarItem> tabs,
  int initialIndex = 0,
  Color? headerColor,
  bool isScrollable = true,
  Color? labelColor,
  Color? unselectedLabelColor,
  TextStyle? labelStyle = const TextStyle(
    fontWeight: FontWeight.w600,
    fontSize: kBodyMedium,
  ),
  Widget? sideWidget,
  double? pillBorderRadius,
  BoxBorder? headerBorder,
  Decoration? indicatorTabbar,
  bool isPill = false,
  Color? indicatorColor,
  double? indicatorWeight,
  bool isTopIndicator = false,
  bool isTabAtStart = true,
  double? tabBarHeight,
})

HorizontalTabBar({
  Key? key,
  required List<TabBarItem> tabs,
  int initialIndex = 0,
  Color? headerColor,
  bool isScrollable = true,
  Color? labelColor,
  Color? unselectedLabelColor,
  TextStyle? labelStyle = const TextStyle(
    fontWeight: FontWeight.w600,
    fontSize: kBodyMedium,
  ),
  Widget? sideWidget,
  double? pillBorderRadius,
  BoxBorder? headerBorder,
  Decoration? indicatorTabbar,
  bool isPill = false,
  Color? indicatorColor,
  double? indicatorWeight,
  bool isTopIndicator = false,
  bool isTabAtStart = true,
  double? tabBarHeight,
})

Parameters Explanation

Parameter	Description
`tabs`	List of `TabBarItem` definitions
`initialIndex`	Initially active tab index
`headerColor`	Background color of the tab header
`isScrollable`	Allows horizontal scrolling when tabs overflow
`labelColor`	Text color for selected tab
`unselectedLabelColor`	Text color for inactive tabs
`labelStyle`	Text style for tab labels
`sideWidget`	Optional widget placed at the end of the tab bar
`isPill`	Enables pill-style tabs
`pillBorderRadius`	Border radius for pill tabs
`indicatorColor`	Color of the active tab indicator
`indicatorWeight`	Thickness of the indicator
`isTopIndicator`	Places indicator at the top instead of bottom
`tabBarHeight`	Height of the tab bar

TabBarItem Model

Dart

class TabBarItem {
  final String label;
  final IconData? icon;
  final Color? iconColor;
  final Widget content;

  TabBarItem({
    required this.label,
    this.icon,
    this.iconColor,
    required this.content,
  });
}

class TabBarItem {
  final String label;
  final IconData? icon;
  final Color? iconColor;
  final Widget content;

  TabBarItem({
    required this.label,
    this.icon,
    this.iconColor,
    required this.content,
  });
}

Basic Example

Dart

HorizontalTabBar(
  tabs: [
    TabBarItem(
      label: 'Overview',
      icon: Icons.info_outline,
      content: Text('Overview Content'),
    ),
    TabBarItem(
      label: 'Activity',
      icon: Icons.timeline,
      content: Text('Activity Content'),
    ),
  ],
);

HorizontalTabBar(
  tabs: [
    TabBarItem(
      label: 'Overview',
      icon: Icons.info_outline,
      content: Text('Overview Content'),
    ),
    TabBarItem(
      label: 'Activity',
      icon: Icons.timeline,
      content: Text('Activity Content'),
    ),
  ],
);

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Tabs section.

Dart

Base UI → Tabs

Base UI → Tabs

Best Practices

Use VerticalTabBar for primary navigation inside dashboards
Use HorizontalTabBar for secondary or contextual navigation
Keep tab labels concise and meaningful
Avoid placing heavy logic directly inside tab content widgets
For many tabs, enable isScrollable

Summary

FlutKit’s tab components provide flexible, production-ready navigation patterns for both vertical and horizontal layouts. With customizable styles, icons, and content rendering, they can adapt seamlessly to admin dashboards, data views, and content-driven pages.

Developers can quickly prototype and refine layouts by combining tabs with other FlutKit components such as Cards, Lists, and Forms.