A premium tab navigation that blends a morphing capsule background with a material ink underline. On selection, the active tab gently elevates, the pill expands to the label’s width, and a slim underline slides and resizes in sync with gesture progress. Inactive tabs remain low-contrast for clear hierarchy. Built for real products: smooth physics, router integration, and fully themeable.

Functionality

• Dual indicators: animated capsule background + ink underline (slide + grow/shrink)

• Gesture-driven transitions (tap & swipe-linked to pages) with spring easing and haptics

• Fixed or scrollable tab lists; alignment modes (leading/center) and equal/auto widths

• Active/inactive states: weight/color/opacity, hover/pressed ripple, optional elevation/shadow

• Optional icons, badges (dot/number), disabled/unread states, long-label ellipsis

• Router/PageView sync, deep links, state restoration, reselect callback

• Theming: capsule radius/blur, underline color/thickness/radius, paddings, typography

• Accessibility: ARIA/semantics, focus rings, RTL & localization, Reduce Motion support

• Performance: layer caching, jank-free at 60fps, safe-area aware

Use cases

• News/Media: Sections with prominent active tab feedback

• Commerce: Category rails that require strong focus state

• Analytics/Dashboards: Segment tabs with status badges

• Education/LMS: Course/Module navigation with long labels

• SaaS/CRUD apps: Top-level views with page-synced tabs

Keywords
tab bar, capsule tabs, pill indicator, underline indicator, animated highlight, dual indicator, scrollable tabs, pageview sync, badges, haptic feedback, hover states, spring animation, dark mode, RTL, reduce motion, accessibility, theming, high performance, Flutter widget, FlutterFlow component, modern navigation, premium UI.