A refined top tab bar where the active label turns bold and an ink-style underline slides and morphs to match the tab’s width. The indicator tracks gesture progress on swipes, easing between tabs with spring physics, while inactive titles remain subdued for clear hierarchy. Built for real apps: fully themeable, accessible, and seamlessly wired to page navigation.

Functionality

• Smooth underline animation (slide + grow/shrink) that matches label width

• Fixed or scrollable tabs with center/leading alignment and equal/auto widths

• Gesture-driven transitions: tap to select, swipe-linked with PageView/Router

• Active/inactive text styles (weight, color, opacity) with ripple + haptic feedback

• Optional icons/badges per tab; disabled/unread states; long-label ellipsis

• Theming controls: indicator color/thickness/corner radius, spacing, typography, shadows

• RTL, dark mode, and Reduce Motion support; ARIA/semantics for screen readers

• High performance: layer caching, no layout jank, 60fps targets

Use cases

• Top-level sections: News (Latest/Trending/Saved), Shop (Men/Women/Kids), Media (Songs/Albums/Artists)

• Filter chips for dashboards and analytics segments

• Content libraries and category carousels with many tabs

• Multi-step forms or wizards with clear progress

Keywords
tab bar, tabs, underline indicator, ink bar, animated indicator, scrollable tabs, text tabs, bold active label, gesture-driven, pageview sync, haptic feedback, icons and badges, disabled state, RTL, dark mode, reduce motion, accessibility, theming, high performance, Flutter widget, FlutterFlow component, modern navigation, premium UI.