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

【问题标题】：How to make a transparent bottom navigation bar in flutter如何在颤动中制作透明的底部导航栏
【发布时间】：2021-09-30 01:10:34
【问题描述】：

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

我正在使用 svg 图标作为底部导航栏图标。同一屏幕顶部应用栏是透明的，但底部应用栏显示白色。



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

【问题讨论】：

标签： flutter dart transparent bottomnavigationview

【解决方案1】：

试试这个：

Scaffold(
  extendBody: true,

【讨论】：

是的，这行得通。谢谢。
好兄弟，继续努力

【解决方案2】：

尝试设置海拔

将高度设置为零：

BottomAppBar（海拔：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,
      ),
    ],
  ),
);

}

解释

高程在小部件中产生阴影

【讨论】：

没有兄弟没有变化。