Meet the pill highlight bottom navigation bar widget π§β¨ β a refined bottom nav for FlutterFlow with a floating, rounded container π« and a colored capsule βpillβ that lights up the active tab (πΌοΈ icon + π·οΈ label). Layered soft shadows add depth βοΈ, while the pill keeps interactions modern and touch-friendly π. With 31 configurable parameters βοΈ, it fits ecommerce, dashboards, media, and social apps on iOS & Android π±.
Functionality
-
π― Active pill highlight: customize background, radius, padding, opacity, and label style.
-
π§© Icon + label tabs: separate active/inactive colors & typography controls.
-
π Smooth animations: fade / scale / slide with custom durations & easing curves.
-
πͺ Floating container: adjustable elevation, shadow, corner radius, and blur.
-
π Badges: dot or counter per tab for alerts & notifications.
-
β»οΈ State restore: initial index + persistence to reopen the last selected tab.
-
π§΅ Hide/Reveal on scroll: immersive content screens when you need them.
-
π‘οΈ Safe-area & notch aware: gesture insets and bottom padding supported.
-
π€ Haptics & ripple: tactile feedback on selection; optional long-press tooltips.
-
π§ Routing-ready: wire
onTap
to go_router, auto_route, or custom actions. -
βΏ Accessibility & RTL: large tap targets, semantic roles, high contrast, localization.
Keywords: bottom navigation, bottom nav bar, pill highlight, capsule tab, active chip, floating bar, glassmorphism, shadow, elevation, icon label, animated tabs, fade scale, slide animation, badges, notification dot, routing, go_router, auto_route, state persistence, hide on scroll, safe area, notch support, gesture insets, haptic feedback, ripple effect, dark mode, light mode, Material 3, Cupertino, accessibility, RTL, localization, ecommerce navigation, dashboard navigation, Flutter widget, FlutterFlow component, modern UI, app shell.
Bottom Navigation Bar V8
- 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.