how can we add bottomnavigationbar in Sliver App widget

Question

I want to Add this fixed bottomNavigationbar in Scrollable sliver App Widget, is there any way we can do it or any alternative way to do this

BottomNavigationBar(

        items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_giftcard),
          title: Text('Deals'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          title: Text('Favourites'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.portrait),
          title: Text('Profile'),
        ),
      ],


 )

score 5 · Accepted Answer · answered Oct 11 '19 at 09:58

You can certainly add the said bottomNavigationBar to the SliverAppBar using NestedScrollView and add bottomNavigationBar outside of it. Here's working code:

return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Sliver with bottomnavbar",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  )),
            ),
          ];
        },
        body: Center(
          child: Text("Text"),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home', style: TextStyle(color: Colors.black),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_giftcard),
            title: Text('Deals',style: TextStyle(color: Colors.black),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favourites',style: TextStyle(color: Colors.black),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.portrait),
            title: Text('Profile',style: TextStyle(color: Colors.black),),
          ),
        ],
      ),
    );

Hope this answers your question.

Also, I need to add navigation routes in the bottom navigation icons, how can it be done? for eg: Home icon should navigate to landing page, deals icon should navigate to deals page and so on — Harsh Hariya, Oct 14 '19 at 07:12
Check this link (from Step 3) on how to add navigation routes to each nav bar item. https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation — Darshan, Oct 14 '19 at 10:59
If your original question is answered, accept / upvote so that it'll be helpful for others as well. — Darshan, Oct 15 '19 at 07:09

how can we add bottomnavigationbar in Sliver App widget

1 Answers1