Flutter：为SizeTransition子Container添加与导航栏一致的BoxShadow

要解决SizeTransition子元素阴影被裁剪、效果不符合预期的问题，核心是把阴影放在SizeTransition的外层容器，避开过渡动画的裁剪逻辑，具体调整方式如下：

• 移除SizeTransition内部Container的BoxShadow配置
• 用一个外层Container包裹SizeTransition，给这个外层容器添加和BottomNavigationBar一致的阴影样式
• 给外层容器预留少量内边距，避免阴影被父级容器裁剪

示例代码调整片段：

// 外层带阴影的容器
Container(
  padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4), // 预留阴影显示空间
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.15),
        blurRadius: 8,
        offset: Offset(0, 2), // 匹配BottomNavigationBar的阴影方向与模糊度
      ),
    ],
  ),
  child: SizeTransition(
    sizeFactor: _animationController,
    axisAlignment: -1.0,
    child: Container(
      color: Colors.white,
      width: 200,
      child: // 原导航菜单内容
    ),
  ),
)

如果想要和BottomNavigationBar的阴影完全一致，可以直接复用其elevation对应的阴影参数：比如elevation:8对应的阴影为blurRadius:12, offset:Offset(0,4), color:Colors.black.withOpacity(0.1)。

内容的提问来源于stack exchange，提问作者MICHEL Baptiste