ChromiaBottomNavigationBar
A customizable bottom navigation bar component for primary app navigation.
Basic Usage
int selectedIndex = 0;
Scaffold(
body: pages[selectedIndex],
bottomNavigationBar: ChromiaBottomNavigationBar(
currentIndex: selectedIndex,
onTap: (index) {
setState(() => selectedIndex = index);
},
items: [
ChromiaBottomNavigationItem(
icon: Icons.home,
label: 'Home',
),
ChromiaBottomNavigationItem(
icon: Icons.explore,
label: 'Explore',
),
ChromiaBottomNavigationItem(
icon: Icons.person,
label: 'Profile',
),
],
),
)
Parameters
items
List<ChromiaBottomNavigationItem>
required
List of navigation items
onTap
ValueChanged<int>
required
Called when an item is tapped
Background color of the bar
Color of the selected item
Color of unselected items
Whether to show labels for all items
ChromiaBottomNavigationItem
A single item in the bottom navigation bar.
Constructor
const ChromiaBottomNavigationItem({
required IconData icon,
required String label,
IconData? selectedIcon,
String? badge,
})
Parameters
Icon to display for the item
Icon to display when selected (optional)
Optional badge text (e.g., notification count)
Example with Badge
ChromiaBottomNavigationItem(
icon: Icons.notifications_outlined,
selectedIcon: Icons.notifications,
label: 'Notifications',
badge: '5',
)
ChromiaFloatingBottomNavigationBar
A floating bottom navigation bar with rounded corners, perfect for a modern look.
Basic Usage
int selectedIndex = 0;
Scaffold(
body: Stack(
children: [
pages[selectedIndex],
Positioned(
left: 0,
right: 0,
bottom: 0,
child: ChromiaFloatingBottomNavigationBar(
currentIndex: selectedIndex,
onTap: (index) {
setState(() => selectedIndex = index);
},
items: [
ChromiaBottomNavigationItem(
icon: Icons.home,
label: 'Home',
),
ChromiaBottomNavigationItem(
icon: Icons.explore,
label: 'Explore',
),
ChromiaBottomNavigationItem(
icon: Icons.favorite,
label: 'Favorites',
),
ChromiaBottomNavigationItem(
icon: Icons.person,
label: 'Profile',
),
],
),
),
],
),
)
Parameters
items
List<ChromiaBottomNavigationItem>
required
List of navigation items
onTap
ValueChanged<int>
required
Called when an item is tapped
Background color of the bar
Color of the selected item
Color of unselected items
Margin around the floating bar
Complete Example
class HomePage extends StatefulWidget {
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _selectedIndex = 0;
final List<Widget> _pages = [
HomeTab(),
ExploreTab(),
FavoritesTab(),
ProfileTab(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _pages[_selectedIndex],
bottomNavigationBar: ChromiaBottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
items: [
ChromiaBottomNavigationItem(
icon: Icons.home_outlined,
selectedIcon: Icons.home,
label: 'Home',
),
ChromiaBottomNavigationItem(
icon: Icons.explore_outlined,
selectedIcon: Icons.explore,
label: 'Explore',
badge: '3',
),
ChromiaBottomNavigationItem(
icon: Icons.favorite_outline,
selectedIcon: Icons.favorite,
label: 'Favorites',
),
ChromiaBottomNavigationItem(
icon: Icons.person_outline,
selectedIcon: Icons.person,
label: 'Profile',
),
],
),
);
}
}
