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.

Answer 1

try this:

Scaffold(
    extendBody: true,