如何在颤动中夹住标签栏容器的边缘？

Question

I have a container at the bottom of my screen that has a BottomNavigationBar. I want the container to get the colour of my background. Even after adding CLipRRect it wasn't getting corrected. I also tried to make the container transparent but it showed me an error where I couldn't assign a colour to my container and give it a boxDecoration.I want the excess white part to merge into my background.

//edited

How do I get rid of the shadow from the background?

Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
    child: Container(
        height: 80,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(52.0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                offset: const Offset(0.0, 0.0),
                blurRadius: 52.0),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) => setState(() => _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 30,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 30,
                  ),
                  title: Text('[![enter image description here][1]][1]')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 30,
                  ),
                  title: Text('')),
            ],
          ),
        )),
  );

Answer 1

This is actually not a problem with the bottom navigation bar. You need to set "extendBody" to "true" for the parent Scaffold widget. This will extend the scaffold body content all the way down to the bottom of the screen!

Scaffold(
  extendBody: true,
  bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);