A modern bottom navigation bar with a pill-shaped capsule, soft elevation, and crisp active states. Built to feel native on iOS & Android, it’s fully themeable and ships with 23 parameters for icons, colors, radii, shadows, and behaviors.
Functionality
-
4–5 tabs with icon-only or icon+label variants.
-
Active/inactive styling with separate colors and opacity.
-
Rounded capsule container with configurable cornerRadius, elevation, and shadowColor.
-
Initial index support and persistent selected state on reopen.
-
onTap actions per tab (navigate with
go_router/auto_route
or custom flows). -
Badge-ready (counts/dots) for notifications on any tab.
-
Safe-area toggle to sit above system gestures on all devices.
-
Icon controls: per-tab asset, size, color; active icon overrides included.
-
Spacing controls: horizontal padding, item gaps, hit areas.
-
Haptics & ripple feedback on selection (optional).
-
Hide on scroll / auto reveal behavior for immersive lists (optional).
-
Dark/Light themes and adaptive blur/overlay effects.
-
Accessibility: large touch targets, semantic roles, RTL/localization ready.
-
Performance-minded: stateless tap handling and lightweight rebuilds.
Keywords: bottom navigation, bottom nav bar, capsule bar, floating bar, pill nav, active tab, icon only, icon label, badges, notification dot, elevation, shadow, corner radius, safe area, initial index, onTap action, route navigation, go_router, auto_route, page transitions, haptic feedback, ripple effect, dark mode, light mode, RTL, localization, accessibility, adaptive layout, iOS, Android, Material 3, Cupertino, Flutter widget, FlutterFlow component, app shell, persistent navigation, modern UI, theming, parameters.
Bottom Navigation Bar V3
- 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.