How to do indexing on bottom navigation bar

Question

Hi all I am new to flutter. I was trying to use bottom navigation bar but it includes indexing navigation over which I got stuck for a long time now. I don't know how to do it so please if anyone know's how to do it let me know. Here's my code

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({Key? key}) : super(key: key);

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    int _selectedIndex = 0;
    void _onItemTapped(int index) {
      setState(() {
        _selectedIndex = index;
      });
    }

    return Scaffold(
      extendBody: true,
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.white,
        selectedIconTheme: const IconThemeData(color: Colors.white),
        elevation: 100,
        type: BottomNavigationBarType.fixed,
        backgroundColor: Colors.transparent,
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(
                Icons.people,
              ),
              label: "Modes"),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.person,
              ),
              label: "Profile"),
          BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings), label: "Settings"),
        ],
      ),
      body: _selectedIndex == 0
          ? const Das()
          : _selectedIndex == 1
              ? const Das()
              : _selectedIndex == 2
                  ? const SaySomethingAboutYou()
                  : _selectedIndex == 3
                      ? const SaySomethingAboutYou()
                      : Container(),
    );
  }
}

Answer 1

Move the following code out of the build method

int _selectedIndex = 0;
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

Keep it above the @override statement.

Answer 2

You can use this approach:

//class variable
int _currentIndex = 0;//default

//class variable
final _screens = [
  const Page1(),
  const Page2(),
  const Page3(),
];

//your start page
return Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
    children: [
      _screens[_currentIndex],
      //some code
    ],
  ),
);

By clicking nav bar items you can change _currentIndex.

Answer 3

Call the following function out of the build method

int _selectedIndex = 0;
void _onItemTapped(int index) {
    setState(() {
    _selectedIndex = index;
  });
}

You can create a new Widget function and return the widget according to the selectedIndex. Check the below code for the Widget function:

Widget bottomNavBarItems(int index) {
    if (index==0) {
        return const Das();    
    } else if (index==1) {
        return const Das();    
    } else if (index==2) {
        return const SaySomethingAboutYou();    
    } else if (index==3) {
        return const SaySomethingAboutYou();    
    } else {
        return const Container();
    }
}

After defining this function, call it in the body of the BottomNavigationBar like this:

body: bottomNavBarItems(_selectedIndex)

Answer 4

try it:

class DashboardScreen extends StatefulWidget {
  const DashboardScreen({Key? key}) : super(key: key);

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  int _selectedIndex = 0;
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        extendBody: true,
        bottomNavigationBar: BottomNavigationBar(
          selectedItemColor: Colors.white,
          selectedIconTheme: const IconThemeData(color: Colors.white),
          elevation: 100,
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.transparent,
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.people,
                ),
                label: "Modes"),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.person,
                ),
                label: "Profile"),
            BottomNavigationBarItem(icon: Icon(Icons.chat), label: "Chats"),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), label: "Settings"),
          ],
        ));
  }
}