4

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.

Haritha Madhushanka
  • 199
  • 2
  • 15

1 Answers1

7

try this:

Scaffold(
    extendBody: true,
Jim
  • 6,928
  • 1
  • 7
  • 18
  • 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. – Haritha Madhushanka May 07 '21 at 09:11
  • 1
    yep, you need a little bit more work to achieve perfection, good on you! – Jim May 07 '21 at 09:15