Flutter设置Container颜色为Colors.transparent仍不透明问题求助

解决方案 #

你遇到的Container无法完全透明的问题可以通过以下几个修改解决：

1. 修正Scaffold配置（最常见原因） #

如果你将该导航组件传入了Scaffold的bottomNavigationBar属性，需要给Scaffold添加extendBody: true配置，这个属性的作用是让页面Body内容延伸到底部导航栏的区域下方，透明的Container才能正确透出下层的Body内容，而不是默认的Scaffold背景色：

Scaffold(
  extendBody: true, // 新增这一行
  bottomNavigationBar: _bottomNavigator(uid),
  // 其他原有配置
)

2. 调整组件结构 #

你当前Stack的第一个子元素是高度20、颜色为iconColor的不透明容器，这个容器会遮挡下层内容，如果你不需要这个底部色块，可以直接删除该元素；如果是要实现导航栏中间的凹口突出效果，推荐使用ClipPath自定义裁剪导航栏形状，代替现在的Stack叠加方案。

3. 替换透明容器实现 #

如果只是需要一个透明的占位容器，可以直接使用SizedBox代替设置了透明色的Container，SizedBox默认无任何背景色，完全透明：

Widget _bottomNavigator(String uid) {
  return SizedBox( // 替换Container为SizedBox，无需设置color
    height: 50,
    child: Offstage(
      offstage: !_isVisible,
      child: Stack(children: [
        // 保留你需要的子元素，删除不需要的不透明色块
        Align(
          alignment: Alignment.bottomCenter,
          child: SizedBox(
            height: 50,
            child: TextButton.icon(
              style: TextButton.styleFrom(
                backgroundColor: Colors.transparent, // 额外设置TextButton背景透明，去掉默认的点击高亮背景可以调整overlayColor
                shadowColor: Colors.transparent,
              ),
              icon: Icon(
                Icons.add_photo_alternate,
                color: gradientBeginColor,
                size: 40,
              ),
              label: Text(''),
              onPressed: () async {},
            ),
          ),
        ),
      ]),
    ),
  );
}

额外优化 #

如果要实现你参考图里的中间图标突出的导航栏效果，更规范的方案是使用BottomAppBar组件，搭配shape: CircularNotchedRectangle()属性，配合FloatingActionButton的location: FloatingActionButtonLocation.centerDocked配置，可以直接实现自带凹口的突出图标导航栏效果，不用自己手写Stack布局。

内容的提问来源于stack exchange，提问作者Alessandro Minervini