'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