how can i remove this white background on this bottom nav bar in flutter

Question

I'm trying to make this bottom nav bar in flutter now am having a challenge. I've created a mainpage.dart where I've put the appbar and the bottom navigation bar codes. The screen for the tabs are put in the screens folder. This is my code for the bottom navbar

Padding(

              padding: const EdgeInsets.only(top: 0.0, bottom: 30, left: 50, right:50), 

              child: ClipRRect(

                borderRadius: BorderRadius.circular(30.0), // Rounded corners for all sides

                child: BottomNavigationBar(

                  backgroundColor: Colors.white,

                  type: BottomNavigationBarType.fixed,

                  currentIndex: _currentIndex,

                  onTap: (index) {

                    setState(() {

                      _currentIndex = index;

                    });

                  },

                  elevation: 0.0,

                  showSelectedLabels: false, // Hide labels for selected tab

                  showUnselectedLabels: false, // Hide labels for unselected tabs

                  items: [

                    BottomNavigationBarItem(

                      icon: Icon(Icons.home),

                      label: '', // Empty label

                    ),

                    BottomNavigationBarItem(

                      icon: Icon(Icons.search),

                      label: '', // Empty label

                    ),

                    BottomNavigationBarItem(

                      icon: Icon(Icons.favorite, ),

                      label: '', // Empty label

                    ),

                    BottomNavigationBarItem(

                      icon: Icon(Icons.person),

                      label: '', // Empty label

                    ),

                  ],

                ),

              ),

            ),

So the idea here is to make the bottom navigation bar to float on top of the tab screens so that if you're on the home tab the content can be scrolled behind the bottom navbar like in this photo below the amber color is representing the content.

But every time I call the body:pages[_currentIndex] the bottom navigation bar seems to be having a white background, or the color matching with the scaffold of the MainPage(). It's creating like it's on container

class MainMenu extends StatefulWidget {
  const MainMenu({super.key});
  static const String id = "landingpage";

  @override
  State<MainMenu> createState() => _MainMenuState();
}

class _MainMenuState extends State<MainMenu> {
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();



  int _currentIndex = 0;

  // Define your pages/screens
  final List<Widget> screens = [
    FavoritePage(),
    HomePage(),

    ListingsPage(),
    ProfilePage(),
  ];
  bool drawerCanOpen = true;
  final kDrawerItemStyle = TextStyle(
    fontSize: 16,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.only(top: 0.0, bottom: 30, left: 50, right:50), // Add padding to the entire bottom navigation bar
        child: ClipRRect(

          borderRadius: BorderRadius.circular(30.0), // Rounded corners for all sides
          child: BottomNavigationBar(
            backgroundColor: Colors.white,
            type: BottomNavigationBarType.fixed,

            currentIndex: _currentIndex,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            elevation: 0.0,

            showSelectedLabels: false, // Hide labels for selected tab
            showUnselectedLabels: false, // Hide labels for unselected tabs
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '', // Empty label


              ),
              BottomNavigationBarItem(

                icon: Icon(Icons.search),
                label: '', // Empty label
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.favorite, ),
                label: '', // Empty label

              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: '', // Empty label
              ),
            ],
          ),
        ),
      ),



      

      key: scaffoldKey,
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            _currentIndex <= 0
                ? SliverAppBar(

              foregroundColor: Color.fromARGB(255, 12, 3, 3),
              title: Row(children: [
                // Image.asset(
                //   'assets/logo1.png',
                //   height: 40,
                //   width: 40,
                // ),
                // Text('glacier'),
              ]
              ),
              leading: Padding(
                padding: const EdgeInsets.all(8.0),
                child: CircleAvatar(
                  backgroundColor: Color.fromARGB(255, 255, 255, 255),
                  radius: 20,
                  child: IconButton(
                    icon: FaIcon(FontAwesomeIcons.bars),
                    onPressed: () {
                      if (drawerCanOpen) {
                        scaffoldKey.currentState?.openDrawer();
                      } else {
                        setState(() {
                          drawerCanOpen = true;
                        });
                      }
                    },
                    color: Colors.black87,
                  ),
                ),
              ),
              actions: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Color.fromARGB(255, 18, 255, 0),
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black26,
                          blurRadius: 5.0,
                          spreadRadius: 0.5,
                          offset: Offset(
                            0.7,
                            0.7,
                          ),
                        ),
                      ],
                    ),
                    child: Badge(
                      backgroundColor: Colors.red,
                      padding: const EdgeInsets.all(7),
                      textStyle: const TextStyle(fontSize: 10.0),
                      largeSize: 20.0,
                      label: const Text('1'),
                      child: CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 20,
                        child: IconButton(
                          icon: FaIcon(FontAwesomeIcons.bagShopping),
                          onPressed: () {
                            Get.to(() => const CartPage(),
                                duration:
                                const Duration(milliseconds: 200),
                                transition: Transition.rightToLeft);
                          },
                          color: Colors.black87,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
              expandedHeight: 50,
              scrolledUnderElevation: 2,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(5.0)),
              floating: false,
              pinned: true,
              elevation: innerBoxIsScrolled ? 4 : 0,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                background: Container(
                  color: Colors.amber, // Set your desired background color here
                ),
              ),
            )
                : SliverToBoxAdapter(
              child: SizedBox.shrink(),
            ),
          ];
        },
        body: screens[_currentIndex],

        ),


    );
  }
}

Answer 1

Set the extendBody property of Scaffold to true.

Scaffold(
  extendBody: true,
  // ...
)

From the documentation:

This property is often useful when the bottomNavigationBar has a non-rectangular shape, like CircularNotchedRectangle, which adds a FloatingActionButton sized notch to the top edge of the bar. In this case specifying extendBody: true ensures that scaffold's body will be visible through the bottom navigation bar's notch.