flutter: how to create bottom navigation bar like this - flutter

Question

I want to make a bottom navigation bar exact like this which is in photo but I can't make.
Please help me.
I also want devide section between each part. please help me

Answer 1

You can custom create bottomNavigationBar using BottomAppBar.
Example:
Step 1: Create a statefull widget in this example its called MyHomePage:
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
//Default is true so this can be ignore/removed
resizeToAvoidBottomInset: true,
appBar: AppBar(
title: Text(widget.title),
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 56,
padding: EdgeInsets.all(6),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
BottomNavigationMenu(
label: 'Home',
isSelected: _selectedIndex == 0,
icon: Icons.home,
onTap: () {
_onItemTapped(0);
},
),
VerticalDivider(),
BottomNavigationMenu(
label: 'Business',
isSelected: _selectedIndex == 1,
icon: Icons.work,
onTap: () {
_onItemTapped(1);
},
),
VerticalDivider(),
BottomNavigationMenu(
label: 'Map',
isSelected: _selectedIndex == 2,
icon: Icons.map_outlined,
onTap: () {
_onItemTapped(2);
},
),
VerticalDivider(),
BottomNavigationMenu(
label: 'Service',
isSelected: _selectedIndex == 3,
icon: Icons.room_service,
onTap: () {
_onItemTapped(3);
},
),
VerticalDivider(),
BottomNavigationMenu(
label: 'Profile',
isSelected: _selectedIndex == 4,
icon: Icons.account_circle,
onTap: () {
_onItemTapped(4);
},
),
],
),
),
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Center(
child: Text("Demo"),
),
),
);
}
}
Step 2: Creating custom BottomNavigationMenu item using StatelessWidget ie. BottomNavigationMenu:
class BottomNavigationMenu extends StatelessWidget {
final Function()? onTap;
final String label;
final IconData icon;
final bool isSelected;
final Color selectedColor = Colors.green;
final Color defaultColor = Colors.grey;
const BottomNavigationMenu(
{required this.icon,
required this.label,
required this.onTap,
required this.isSelected});
#override
Widget build(BuildContext context) {
return Expanded(
child: InkWell(
onTap: onTap,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
color: isSelected ? selectedColor : defaultColor,
),
Text(
label,
style: Theme.of(context).textTheme.bodyText2!.copyWith(
color: isSelected ? selectedColor : defaultColor,
),
)
],
),
),
);
}
}
That's it. You can customise your selected color in BottomNavigationMenu.
And this is how it looks: Custom BottomNavigationBar

Answer 2

Result
CustomNavBarItem
class BottomNavIcon extends StatelessWidget {
final IconData iconData;
final bool isSelected;
final String label;
final Function callback;
const BottomNavIcon({
Key? key,
required this.iconData,
required this.isSelected,
required this.label,
required this.callback,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
callback();
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: isSelected ? Colors.green.shade200 : Colors.grey.shade300,
shape: BoxShape.circle,
),
child: Icon(
iconData,
color: isSelected ? Colors.green.shade800 : Colors.grey.shade600,
),
),
Text(
label,
style: TextStyle(
fontSize: 12,
color: isSelected ? Colors.green : Colors.grey,
fontWeight: FontWeight.bold,
),
)
],
),
);
}
}
VerticalDivider Control
get divider => VerticalDivider(
color: Colors.grey.shade300,
endIndent: 4,
indent: 4,
);
Full Widget:
import 'package:flutter/material.dart';
class BottomNavBar extends StatefulWidget {
BottomNavBar({Key? key}) : super(key: key);
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;
get divider => VerticalDivider(
color: Colors.grey.shade300,
endIndent: 4,
indent: 4,
);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Text("Body"),
bottomNavigationBar: BottomAppBar(
child: Container(
//* for padding
height: kBottomNavigationBarHeight + 16,
padding: EdgeInsets.all(8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
BottomNavIcon(
iconData: Icons.home_filled,
isSelected: _selectedIndex == 0,
label: "Home".toUpperCase(),
callback: () {
setState(() {
_selectedIndex = 0;
});
},
),
divider,
BottomNavIcon(
iconData: Icons.business_center,
isSelected: _selectedIndex == 1,
label: "Business".toUpperCase(),
callback: () {
setState(() {
_selectedIndex = 1;
});
},
),
divider,
BottomNavIcon(
iconData: Icons.location_on_outlined,
isSelected: _selectedIndex == 2,
label: "Map".toUpperCase(),
callback: () {
setState(() {
_selectedIndex = 2;
});
},
),
divider,
BottomNavIcon(
iconData: Icons.design_services_outlined,
isSelected: _selectedIndex == 3,
label: "services".toUpperCase(),
callback: () {
setState(() {
_selectedIndex = 3;
});
},
),
divider,
Container(
child: BottomNavIcon(
iconData: Icons.settings,
isSelected: _selectedIndex == 4,
label: "Profile".toUpperCase(),
callback: () {
print("oncalleck $_selectedIndex");
setState(() {
_selectedIndex = 4;
});
},
),
),
],
),
),
),
);
}
}