Premium Tab Navigation — morphing capsule + ink underline ⚡️. A flutterflow tabbar custom widget that blends a morphing capsule background with a material-style ink underline. On selection, the active tab gently elevates, the pill expands to the label’s width, and a slim underline slides & resizes in sync with your gesture. Inactive tabs stay low-contrast for crystal-clear hierarchy. Built for real products: smooth physics, router integration, and full theming. 🚀

✨ Functionality

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

• 🤲 Gesture-driven transitions: tap & swipe-linked to pages with spring easing + subtle haptics

• 📏 Layouts: fixed or scrollable lists; leading/center alignment; equal or auto widths

• 🎚️ States: active/inactive weight, color, opacity; hover/pressed ripple; optional elevation/shadow

• 🧩 Extras: icons, badges (dot/number), disabled/unread, long-label ellipsis

• 🔗 Sync: Router/PageView linking, 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 60 fps, safe-area aware

🧭 Best for

• 🗞️ News/Media: section rails with standout active feedback

• 🛒 Commerce: category tabs needing strong focus state

• 📊 Analytics/Dashboards: segmented tabs with status badges

• 🎓 Education/LMS: course/module navigation with long labels

• 🧰 SaaS/CRUD: top-level view switching with page-synced tabs

🔑 Keywords

flutterflow tabbar custom widget, 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