A premium navigation tab bar with a pill-shaped indicator that glides and morphs its shape/color on tap or swipe. The active tab elegantly expands to reveal a label (e.g., Catalog) while inactive tabs remain icon-only. Spring-physics animations support gesture progress, haptics, and dark mode. Ideal for modern apps where clear navigation, micro-interactions, and high performance matter.

Functionality

• Smooth active-indicator transition (slide + shape morph) with color and shadow change

• Icon-only → icon+label behavior for the active tab; automatic label ellipsis

• Gesture control: tap, swipe between tabs, long-press (optional context menu)

• Badges/counters (dot, number, “+N”), unread/disabled states

• Scrollable tabs and adaptive layout (phones/tablets, portrait/landscape)

• Router/Navigation integration (deep links, state restoration, back stack)

• Haptic feedback, ripple, hover/pressed states

• Theming: capsule radius, bar thickness/height, paddings, typography, color schemes, background blur/gradient

• Accessibility: proper ARIA/semantics, focus rings, RTL support, Reduce Motion mode

• Performance: single-layer indicator, layer caching, 60fps targets; safe-area (notch) aware

• Hooks/analytics: onTabChange, onReselect, onBadgeTap, screen tracking

Use cases

• Marketplaces & catalogs (Catalog / Collections / Cart / Profile)

• Media apps (Feed / Search / Library / Downloads)

• Fintech/banking (Accounts / Payments / Analytics / Profile)

• Education & LMS (Courses / Progress / Assignments / Messages)

• SaaS dashboards & CRM (Leads / Deals / Reports / Settings)

Keywords
tab bar, bottom navigation, capsule tabs, morphing indicator, animated highlight, icon to label, badges, unread counter, swipe between tabs, haptic feedback, spring animation, blur background, dark mode, RTL, reduce motion, accessibility, router integration, deep link, state restoration, high performance, Flutter widget, FlutterFlow component, modern navigation, premium UI.