Custom BottomNavigationBar in Flutter

Question

I tried to implement a custom bottom navigation bar. I use a pageview to navigate between the pages. Now the bottom navigation bar is not absolutely above the page view but cuts off part of the page view. Can anyone help me here?

Here is the associated code:

  Scaffold buildHomePage() {
    return Scaffold(
      body: PageView(
        children: <Widget>[
          PopularScreen(),
          DiscoverScreen(),
          ActivityScreen(),
          ProfileScreen()
        ],
        controller: pageController,
        onPageChanged: onPageChanged,
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  Widget buildBottomNavigationBar() {
    return BottomAppBar(
          child: Container(
        height: 65,
        margin: EdgeInsets.only(left: 30, bottom: 40, right: 30),
        padding: EdgeInsets.all(8),
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: 5,
            )
          ],
          color: Colors.white,
          borderRadius: BorderRadius.circular(50),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: items.map((item) {
            var itemIndex = items.indexOf(item);
            return GestureDetector(
              onTap: () => onTap(itemIndex),
              child: _buildNavBarItem(item, pageIndex == itemIndex),
            );
          }).toList(),
        ),
      ),
    );
  }

Answer 1

Your answer is Stack class, which will help you build your BottomNavigationBar on top of your PageView

Basic layout of the Page

Stack(
  children: [
    PageView(
      ....
    )

    Positioned(
       top: ..,
       left: ..,
       bottom: ..,
       right: ..,
       child: BottomNavigationBar()
    )
  ]
)

If that make sense to you

Answer 2

You can use the Stack Widget to position the your BottomNavigationBar on top of the PageView:

Scaffold(
  body: Stack(
    children: <Widget>[
      PageView(...),
      Align(
        alignment: Alignment.bottomCenter,
        child: buildBottomNavigationBar(pageController),
      ),
    ],
  ),
);

Then you can remove the BottomAppBar from the buildBottomNavigationBar() or set the elevation property to 0 and the color to Colors.transparent:

BottomAppBar(
  color: Colors.transparent,
  elevation: 0,
  child: ...
);

Result: