A premium bottom navigation bar that pairs a floating capsule with an animated spotlight ring around the active icon. Designed for storefronts and content apps, it delivers crisp elevation, soft shadows, and springy transitions while keeping labels readable (Home, Search, Cart, Profile).

Functionality

• Animated spotlight ring on the selected tab (size, thickness, color, spring).

• 4–5 tabs, icon-only or icon+label; individual icons and active variants.

• Floating capsule container with configurable corner radius, elevation, shadow.

• Active/Inactive styling (separate colors, opacity, and label weights).

• Badges (counts/dots) for notifications on any tab.

• onTap actions per tab; easy routing with go_router / auto_route.

• Animate on init and animate on tab change with custom durations.

• Hide-on-scroll / auto-reveal behavior for immersive pages.

• Safe-area aware; works with gesture insets and device notches.

• Haptics & ripple feedback; optional long-press hints/tooltips.

• Layout controls: horizontal padding, item spacing, hit-target size.

• State persistence: restore selected tab on app reopen.

• Theming: light/dark, glass/blur styles, gradients, icon size/weight.

• Accessibility & RTL: semantic roles, high-contrast states, localized labels.

• Performance-tuned: minimal rebuilds, GPU-accelerated animations.

Keywords: bottom navigation, bottom nav bar, active ring, spotlight ring, animated indicator, floating capsule, pill nav, elevation, shadow, icon label, badges, notification dot, route navigation, go_router, auto_route, page transitions, hide on scroll, safe area, notch support, haptic feedback, ripple effect, dark mode, light mode, glassmorphism, blur background, gradient, accessibility, RTL, localization, adaptive layout, Material 3, Cupertino, iOS, Android, Flutter widget, FlutterFlow component, app shell, ecommerce navigation, modern UI, spring animation, configurable parameters.