How to make a transparent bottom navigation bar in flutter

Question

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,
          ),
        ],
      ),
    );
  }

Answer 1

try this:

Scaffold(
  extendBody: true,