How to curve Bottom Navigation bar corners without affecting the content in the background? Flutter

Question

I have created a Custom Bottom Navigation Bar with flutter. But I can still see white color filling the background behind the curved corners. I want to see the background content.

This is how the bottom nav bar looks like.

As you can see, the corners are filled with white color.

This is my code for the bottom nav bar.

bottomNavigationBar: Container(
      decoration: BoxDecoration(
        color: Colors.transparent,
        backgroundBlendMode: BlendMode.clear,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18),
          topRight: Radius.circular(18),
        ),
        boxShadow: [
          BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
        ],
      ),
      height: MediaQuery.of(context).size.height * 0.085,
      child: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(18.0),
          topRight: Radius.circular(18.0),
        ),
        child: BottomNavigationBar(
          backgroundColor: Color(0xFFF0B50F),
          type: BottomNavigationBarType.fixed,
          selectedLabelStyle: TextStyle(fontSize: 12),
          items: [
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
            BottomNavigationBarItem(),
          ],
          currentIndex: _selectedPage,
          selectedItemColor: Colors.black,
          onTap: _onItemTapped,
        ),
      ),
    ),

I tried setting the color of the Container to transparent. But it didn't work.

Solution

try this:

Scaffold(
    extendBody: true,

Comments

[Haritha Madhushanka]

It worked sir, thanks! I had to add a SizedBox() to the bottom of the Scaffold body and add some height because When I added the extendBody: true line, NavBar stopped taking the space. But it's working perfectly now.

[Jim]

yep, you need a little bit more work to achieve perfection, good on you!