A modern bottom navigation bar with a floating, rounded container and a capsule “pill” highlight for the active tab. The selected item expands into a chip with icon + label, while inactive items remain minimal for a clean, content-first look. Optimized for FlutterFlow projects and production apps on iOS and Android.
-
Pill highlight state: active tab morphs into a filled chip with icon + text.
-
Floating bar: soft multi-layer shadow, adjustable elevation and corner radius.
-
Icon & label control: toggle labels, set sizes, weights, and spacing per tab.
-
Per-tab styling: active/inactive colors, custom icons, background, and ripple.
-
Smooth animations: scale/expand, color fade, and slide with custom curves/durations.
-
Badges: dot or numeric counters on any item (cart, inbox, notifications).
-
Behavior options: initial index, state persistence, hide on scroll, sticky/overlay modes.
-
Safe-area aware: notch/gesture inset handling; works with transparent system bars.
-
Haptics & feedback: optional tactile tap + material ripple.
-
Routing-ready: wire
onTap
to GoRouter/AutoRoute or custom flow actions. -
Accessibility & RTL: large tap targets, semantic roles, high contrast, localization.
Keywords: bottom navigation, bottom nav bar, pill highlight, chip tab, floating bar, rounded nav, capsule tab, animated tabs, icon and label, active state, inactive state, tab badges, notification dot, smooth animation, color transition, elevation shadow, soft UI, neumorphism, safe area, notch support, haptic feedback, ripple effect, hide on scroll, sticky nav, routing, GoRouter, AutoRoute, Flutter widget, FlutterFlow component, Material 3, iOS Android, RTL, accessibility.
Bottom Navigation Bar V10
- Fixed price & scope
- Pixel-perfect UI/UX
- App Store & Google Play submission
You may only use this template for one project. For more details, please read the Marketplace Terms of Service.