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.

score 4 · Answer 1 · answered Jun 07 '21 at 12:15

4

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.

answered Jun 07 '21 at 12:15

Code on the Rocks

11,488
3
53
61

This is completely counter intuitive but it works. Thanks a lot – Andre Pena Nov 16 '22 at 20:01

score 0 · Answer 2 · answered Mar 04 '22 at 07:07

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

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

2 Answers2