Components
Bottom Navigation
A customizable bottom navigation bar widget with floating support, radius, color variants, and visual styles.
Usage
Basic
FluttyBottomNavigation(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
],
currentIndex: 0,
onTap: (index) => print('Tapped: \$index'),
);Floating with Outlined Style
FluttyBottomNavigation(
items: [...],
currentIndex: 1,
onTap: (_) {},
isFloating: true,
variant: StyleVariant.outlined,
color: ColorVariant.primary,
radius: RadiusVariant.lg,
);Custom Colors and Padding
FluttyBottomNavigation(
items: [...],
currentIndex: 2,
onTap: (_) {},
selectedItemColor: Colors.blueAccent,
unselectedItemColor: Colors.grey,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
);API
FluttyBottomNavigation Props
| Prop | Type | Default |
|---|---|---|
items | List<BottomNavigationBarItem> | - |
currentIndex | int | - |
onTap | ValueChanged<int> | - |
backgroundColor? | Color? | - |
selectedItemColor? | Color? | - |
unselectedItemColor? | Color? | - |
elevation? | double? | - |
type? | BottomNavigationBarType? | - |
showLabels? | bool | true |
isFloating? | bool | false |
variant? | StyleVariant | StyleVariant.solid |
padding? | EdgeInsetsGeometry? | - |
color? | ColorVariant | ColorVariant.secondary |
radius? | RadiusVariant | RadiusVariant.md |