A refined bottom navigation bar with a floating container and a colored pill highlight for the active tab (icon + label). The layered shadow gives depth while the rounded capsule keeps things modern and touch-friendly. With 31 configurable parameters, it adapts to ecommerce, dashboards, media, and social apps on both iOS and Android.

Functionality

• Active pill highlight (background, radius, padding, opacity, label style).

• Icon + label tabs with separate active/inactive colors and typography.

• Smooth animations on tab change (fade/scale/slide; custom duration/ease).

• Floating container with adjustable elevation, shadow, corner radius, and blur.

• Badges (dot or count) per tab for alerts and notifications.

• Initial index & persistence to restore the last selected tab.

• Hide on scroll / reveal on scroll for immersive content screens.

• Safe-area & notch aware; supports gesture insets and bottom padding.

• Haptics & ripple feedback on selection; optional long-press tooltips.

• Routing-ready: bind onTap to go_router, auto_route, or custom actions.

• Accessibility & RTL: large hit targets, semantic roles, high-contrast states, 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.