'Error while building Bottom Navigation Bar Flutter
I'm new to Flutter and I'm trying to learn by imitating an app so please do not bash me too hard. First of all, I have this main_page.dart
that looks like this. This is without the BottomNavigationBar
and it works perfectly fine. I'm watching this youtube video to build a bottom nav bar
but this error occur when I try to include into my main_page.dart
which is the HomePage()
in my main.dart (which is the original MAIN dart file that comes initially
.
So here's my BottomNavigationBar
code:
class bottomNavBar extends StatefulWidget {
const bottomNavBar({Key? key}) : super(key: key);
@override
State<bottomNavBar> createState() => _bottomNavBarState();
}
class _bottomNavBarState extends State<bottomNavBar> {
List pages = [
HomePage(),
activityMain(),
investMain(),
sendMain()
];
int currentIndex = 0;
void onTap(int index){
setState(() {
currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: pages[currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTap,
currentIndex: currentIndex,
backgroundColor: Color(0xFFF36A3B),
selectedItemColor: Colors.black54,
unselectedItemColor: Colors.grey.withOpacity(0.5),
showSelectedLabels: true,
showUnselectedLabels: true,
selectedFontSize: 10,
unselectedFontSize: 10,
elevation: 0,
items: [
BottomNavigationBarItem(label: 'Assets', icon: FaIcon(FontAwesomeIcons.wallet)),
BottomNavigationBarItem(label: 'Activity', icon: FaIcon(FontAwesomeIcons.userPlus)),
BottomNavigationBarItem(label: 'Invest', icon: FaIcon(FontAwesomeIcons.arrowTrendUp)),
BottomNavigationBarItem(label: 'Send', icon: FaIcon(FontAwesomeIcons.solidPaperPlane))
],
),
);
}
}
Solution 1:[1]
I don't quite get the error, but generally there is a problem when generating a bottom navigation bar with more than thre items just define the type as fixed like so:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | LMech |