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

Issue

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.

enter image description here

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,

Answered By – Jim

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.