Flutter animations包OpenContainer设置透明色显示为灰色问题

问题表现 #

使用OpenContainer做转场动画时，即使将closedColor设置为Colors.transparent，关闭状态下的组件仍显示灰色，无法透出下层的图片/页面背景，无法实现透明卡片效果。
复现代码如下：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.pinkAccent,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: [
          testContainer(),
          testContainer(),
          testContainer(),
          testContainer(),
          testContainer(),
          testContainer(),
        ],
      ),
    );
  }

  OpenContainer<Object> testContainer() {
    return OpenContainer(
      closedColor: Colors.transparent,
      closedBuilder: (BuildContext context, void Function() openBuilder) {
        return Container(
          height: 35,
          width: double.infinity,
          color: Colors.transparent,
          child: const Center(child: Text("hello")),
        );
      },
      openBuilder: (BuildContext context,
          void Function({Object? returnValue}) closeBuilder) {
        return Container(
          height: 300,
          width: double.infinity,
          child: const Center(child: Text("WW")),
        );
      },
    );
  }
}

• 异常运行效果：
  
• 预期透明效果：
  

问题原因 #

OpenContainer内部基于Material组件渲染关闭状态UI，灰色层来自两个默认配置：

1. 组件默认closedElevation值为1，非0海拔在M3设计规范下会自动叠加一层半透明的表面色调（surfaceTint）
2. 低版本animations包中，非0海拔的阴影渲染逻辑会强制叠加半透明灰色层，即使背景色设为透明也无法透出下层内容

修复代码 #

给OpenContainer补充两个配置即可实现完全透明效果：

OpenContainer<Object> testContainer() {
  return OpenContainer(
    closedColor: Colors.transparent,
    // 以下两个为关键修复配置
    closedElevation: 0,
    closedSurfaceTintColor: Colors.transparent,
    // 可选配置：移除打开转场时的白色闪屏
    openColor: Colors.transparent,
    closedBuilder: (BuildContext context, void Function() openBuilder) {
      return Container(
        height: 35,
        width: double.infinity,
        color: Colors.transparent,
        child: const Center(child: Text("hello")),
      );
    },
    openBuilder: (BuildContext context,
        void Function({Object? returnValue}) closeBuilder) {
      return Container(
        height: 300,
        width: double.infinity,
        child: const Center(child: Text("WW")),
      );
    },
  );
}

内容的提问来源于stack exchange，提问作者Sanketh B. K