Use this code to achieve bottom navigation bar, And customize it as per your requirements...
class BottomNavBar extends StatefulWidget {
const BottomNavBar({Key? key}) : super(key: key);
@override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int pageIndex = 0;
List<Widget> pageList = <Widget>[Home(), Profile(), Setting()];//Here define your own screens
@override
Widget build(BuildContext context) {
return Scaffold(
body: pageList[pageIndex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.redAccent[400],
currentIndex: pageIndex,
onTap: (value) {
setState(() {
pageIndex = value;
});
},
// type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
activeIcon: Icon(
Icons.home,
color: AppColors.black,
),
icon: Icon(
Icons.home,
color: AppColors.grey,
),
label: ""),
BottomNavigationBarItem(
activeIcon: Icon(
Icons.person,
color: AppColors.black,
),
icon: Icon(
Icons.person,
color: AppColors.grey,
),
label: ""),
BottomNavigationBarItem(
activeIcon: Icon(
Icons.settings,
color: AppColors.black,
),
icon: Icon(
Icons.settings,
color: AppColors.grey,
),
label: ""),
]));
}
}