Components
FxBottomBar
A pill-style, animated navigation bar for primary app shell navigation.
FxBottomBar
FxBottomBar is a navigation component designed for primary app shells. It features physics-based selection tracking, smooth animations, and automatic theme adaptation.
Usage
FxBottomBar(
currentIndex: currentTab.value,
onTap: (index) => currentTab.value = index,
items: const [
FxBottomBarItem(icon: Icons.home, label: "Home"),
FxBottomBarItem(icon: Icons.search, label: "Search"),
FxBottomBarItem(icon: Icons.person, label: "Profile"),
],
)API Reference
| Name | Type | Default | Description |
|---|---|---|---|
currentIndex | int | required | The active tab index. |
items | List<FxBottomBarItem> | required | List of navigation items. |
onTap | ValueChanged<int> | required | Callback when tab is selected. |
activeColor | Color? | Fx.primary | Color for the active state indicator. |
containerStyle | FxStyle? | null | Custom styling for the bar container. |
The Master Navigation Implementation
A modern, pill-style bottom navigation bar with theme-aware colors and smooth scaling.
class AppShellNavigation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Fx(() => FxBottomBar(
currentIndex: activeTab.value,
onTap: (i) => activeTab.value = i,
activeColor: Fx.primary,
containerStyle: FxStyle(
backgroundColor: FxTheme.isDarkMode ? Color(0xFF1E293B) : Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(32)),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
items: const [
FxBottomBarItem(icon: Icons.grid_view_rounded, label: "Home"),
FxBottomBarItem(icon: Icons.shopping_bag_rounded, label: "Shop"),
FxBottomBarItem(icon: Icons.person_rounded, label: "Profile"),
],
));
}
}Fluxy's navigation system utilizes physics-based animations for selection indicators, providing a premium feel. It automatically handles text truncation and overflow prevention on small screens.
Haptic Feedback (Optional)
To keep the core library lightweight, haptic feedback is optional. You can integrate it using Fx.haptic within the onTap callback:
onTap: (index) {
Fx.haptic?.medium();
activeTab.value = index;
}