On bottom navigation bar when clicking on icons it is not navigating to other page

Question

This is my code for my homepage but my navigation is not working when I am tapping on my bottom navigation bar Icons

Please help me with this problem All other things in the code is working properly except bottom navigation bar

import 'package:app_first/pages/Settings.dart';
import 'package:app_first/pages/about_us.dart';
import 'package:app_first/pages/contact_us.dart';
import 'package:app_first/pages/our_services.dart';
import 'package:app_first/utilities/route.dart';
import 'package:app_first/widgets/bottom_navigation.dart';
import 'package:app_first/widgets/drawer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  
  final List<Widget> _children = [
    MyHomePage(),
    Ourservices(),
    Aboutus(),
    Contactus(),
    SettingPage(),
  ];

  void onTappedBar(int index)
  {
    setState(() {
      _currentIndex = index;
    });
  }


  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title:Center(
         child: Text("FOODIES@CU"),
        ),
      ),
      body:  SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(height: 40, width: double.infinity,),
            Image.asset(
              "assets/images/background.jpg",
              fit: BoxFit.cover,
              width: 500,
            ),

            SizedBox(height: 40,),
            Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(width: 2,color: Colors.orangeAccent,),
                )
              ),
              child: Text(
                "TOP RATED SHOPS",
                style: TextStyle(
                  
                  height: 2,
                    fontSize: 20,
                    color: Colors.deepOrangeAccent,
                    fontWeight: FontWeight.bold,
                   // backgroundColor: Colors.black,
                    ),
              ),
            ),
            SizedBox(height: 35,),
            Container
            (decoration: BoxDecoration(
              border: Border.all(width: 4),
            ),
              child: 
            Image.asset("assets/images/fr.jpg", fit: BoxFit.cover, width: 300, height: 200,),
            ),

            SizedBox(height: 20,),
            GestureDetector(
              onTap: (){
               Navigator.pushNamed(context, MyRoute.loginroute);
              },
              child: Container(
                child: Text("FOOD REPUBLIC" , style: 
                TextStyle(
                  color: Colors.brown,
                  fontSize: 20,
                ),),
              ),
            ),


             SizedBox(height: 35,),
            Container
            (decoration: BoxDecoration(
              border: Border.all(width: 4),
            ),
              child: 
            Image.asset("assets/images/fr.jpg", fit: BoxFit.cover, width: 300, height: 200,),
            ),

            SizedBox(height: 20,),
            GestureDetector(
              onTap: (){
               Navigator.pushNamed(context, MyRoute.loginroute);
              },
              child: Container(
                child: Text("FOOD REPUBLIC" , style: 
                TextStyle(
                  color: Colors.brown,
                  fontSize: 20,
                ),),
              ),
            )
          ],
        ),
          ),

           bottomNavigationBar: BottomNavigationBar(

        onTap: onTappedBar,
        currentIndex: _currentIndex,
        fixedColor: Colors.black,
        elevation: 100,
        items: [
          BottomNavigationBarItem(icon: Icon(EvaIcons.home, color: Colors.indigo,),
          label: 'Home',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.shoppingCart, color: Colors.indigo,),
          label: 'Our services',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.bookOpen, color: Colors.indigo,),
          label: 'About us',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.phoneCall, color: Colors.indigo,),
          label: 'Contact us',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.settings, color: Colors.indigo,),
          label: 'Settings',
          backgroundColor: Colors.white70
          ),
        ]
        ),     
      drawer: MyDrawer(),




      
      );
  }
}

On bottom navigation bar I am using onTapped for navigating please look into it And help me with this please!

I am getting this error After adding body:_children[_currentindex];

I am getting this error please help me to resolve it

Answer 1

You are not specifying the page in your body

Change your body in Scaffold to

body: _children[_currentIndex];

Final Code:

import 'package:app_first/pages/Settings.dart';
import 'package:app_first/pages/about_us.dart';
import 'package:app_first/pages/contact_us.dart';
import 'package:app_first/pages/our_services.dart';
import 'package:app_first/utilities/route.dart';
import 'package:app_first/widgets/bottom_navigation.dart';
import 'package:app_first/widgets/drawer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttericon/font_awesome5_icons.dart';
import 'package:eva_icons_flutter/eva_icons_flutter.dart';


class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  
  final List<Widget> _children = [
    MyHomePage(),
    Ourservices(),
    Aboutus(),
    Contactus(),
    SettingPage(),
  ];

  void onTappedBar(int index)
  {
    setState(() {
      _currentIndex = index;
    });
  }


  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title:Center(
         child: Text("FOODIES@CU"),
        ),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(

        onTap: onTappedBar,
        currentIndex: _currentIndex,
        fixedColor: Colors.black,
        elevation: 100,
        items: [
          BottomNavigationBarItem(icon: Icon(EvaIcons.home, color: Colors.indigo,),
          label: 'Home',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.shoppingCart, color: Colors.indigo,),
          label: 'Our services',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.bookOpen, color: Colors.indigo,),
          label: 'About us',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.phoneCall, color: Colors.indigo,),
          label: 'Contact us',
          backgroundColor: Colors.white70
          ),

          BottomNavigationBarItem(icon: Icon(EvaIcons.settings, color: Colors.indigo,),
          label: 'Settings',
          backgroundColor: Colors.white70
          ),
        ]
        ),     
      drawer: MyDrawer(),
      
      );
  }
}