How to make a transparent bottom navigation bar in flutter-CodePudding

App screen is covered with an image, there is a bottom app bar which I need to see the background image as transparent.

I am using svg icons for bottom navigationbar icons. The same screen top appbar is transparent but bottom app bar showing white color.



  BottomAppBar _buildBottomNavigationBar() {
    return BottomAppBar(
      color: Colors.transparent,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          IconButton(
            onPressed: () {},
            icon: SvgPicture.asset(
              'assets/icons/home.svg',
              color: Colors.black,
            ),
            //color: Colors.black,
          ),
          IconButton(
            onPressed: () {},
            icon: SvgPicture.asset('assets/icons/location.svg'),
            color: Colors.black,
          ),
          IconButton(
            onPressed: () {},
            icon: SvgPicture.asset('assets/icons/fish.svg'),
            color: Colors.black,
          ),
          IconButton(
            onPressed: () {},
            icon: SvgPicture.asset('assets/icons/menu.svg'),
            color: Colors.black,
          ),
        ],
      ),
    );
  }

CodePudding user response：

try this:

Scaffold(
  extendBody: true,

CodePudding user response：

Try to set elevation

set elevation to zero:

BottomAppBar(elevation: 0)

Example

 BottomAppBar _buildBottomNavigationBar() {
return BottomAppBar(
  elevation: 0,
  color: Colors.transparent,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        onPressed: () {},
        icon: SvgPicture.asset(
          'assets/icons/home.svg',
          color: Colors.black,
        ),
        //color: Colors.black,
      ),
      IconButton(
        onPressed: () {},
        icon: SvgPicture.asset('assets/icons/location.svg'),
        color: Colors.black,
      ),
      IconButton(
        onPressed: () {},
        icon: SvgPicture.asset('assets/icons/fish.svg'),
        color: Colors.black,
      ),
      IconButton(
        onPressed: () {},
        icon: SvgPicture.asset('assets/icons/menu.svg'),
        color: Colors.black,
      ),
    ],
  ),
);

}

Explain

elevation make a shadow in widgets