How we can have different appbar for each BottomNavigation Screen in Flutter

Question

I am working on an app where I need to have differnt appbar for every Screen based on BottomNavigation Buttons. But in my case I have only the main Appbar or in some screens I am having double appbars. I tried Appbar==false technique using preferrerd size to make it's size 0 but it did'nt work for me. is there any helpful tachnique to resolve this issue?

Enter code here
appBar: widget.appbar == false
            ? AppBar(
                title: Text(
                  "Favrite",
                  style: TextStyle(color: Colors.white),
                ),
              )
            : PreferredSize(preferredSize: Size.fromHeight(0), child: AppBar()),

Thanking in advance.

Answer 1

You can remove the AppBar that's at the same level as the BottomNavigationBar and then in each of your screens, add a new Scaffold with it's own AppBar.

Answer 2

You can import different screens and appbars for the BottomNavigation Buttons in Lists and use them as:

appBar: PreferredSize(
  preferredSize: const Size.fromHeight(56), // 56 is default height
  child: _appBars[_selectedIndex],
), // PreferredSize

and

body: _pages[_selectedIndex],

Check this link for full code: https://stackoverflow.com/a/71347391/12302691