如何在颤动中制作透明的底部导航栏

Question

应用程序屏幕被图像覆盖，有一个底部应用程序栏，我需要将背景图像看成透明的。

我将 svg 图标用作底部导航栏图标。同屏top appbar透明但bottom app bar显示白色



  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

尝试设置海拔

将海拔设置为零：

底部应用栏（高度：0）

例子

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

}

解释

高度在小部件中产生阴影

Answer 2

试试这个：

Scaffold(
  extendBody: true,

如何在颤动中制作透明的底部导航栏

How to make a transparent bottom navigation bar in flutter

transparent

dart

flutter

bottomnavigationview