Home > OS >  How to use Bottom Tab Bar for Navigation
How to use Bottom Tab Bar for Navigation

Time:10-08

I have four items in BottomTabBar

I need to go to different Screens onTap on TabBar Item.

Can any one help me please

CodePudding user response:

      int _currentIndex = 0;
    
      final _tabs = [
        HomePageTab(),
        Screen1Tab(),
        Screen2Tab(),
        Screen3Tab(),
      ];

bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: _onNavigationBarItemClick,
        fixedColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.black,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), label: "Screen 1"),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), label: "Screen 2"),
          BottomNavigationBarItem(
              icon: Icon(Icons.person), label: "Screen 3"),
        ],
      ),
    );

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

and in the body call it like;

  body: IndexedStack(
    index: _currentIndex,
    children: _tabs,
  ),

CodePudding user response:

second part

  • Related