Flutter使用Stack组件时如何避免自定义GreenButtonWidget默认样式被修改

问题由两个核心原因导致：一是GreenButtonWidget中的ElevatedButton仅指定了背景色，文字颜色、表面色调、阴影等属性依赖系统默认计算，在BackdropFilter的模糊渲染上下文中自动适配出错；二是Success页面中的BackdropFilter未填充满父容器，导致子组件出现异常的图层混合。

你可以按以下步骤修复：

• 第一步：完善GreenButtonWidget的按钮样式，显式指定所有核心属性
  将组件中ElevatedButton的style参数修改为如下代码：

  style: ElevatedButton.styleFrom(
    primary: HexColor("#53B175"),
    onPrimary: Colors.white, // 固定文字颜色为白色，避免系统自动判断出错
    elevation: 0, // 移除默认阴影与海拔效果，避免和模糊层混合变色
    surfaceTintColor: Colors.transparent, // 关闭Material 3默认的表面色调叠加，避免背景透色
  ),
  

• 第二步：修正Success页面中BackdropFilter的使用方式
  给BackdropFilter外层包裹Positioned.fill，让它填充满整个Stack，保证模糊效果正常渲染：

  Positioned.fill(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: backDropBlur, sigmaY: backDropBlur),
      child: Container(
        color: Colors.transparent,
        child: Center(child: _bodyMain(context)),
      ),
    ),
  )
  

• 可选优化：如果不需要内容区域透出下方模糊效果，直接给_bodyMain返回的Container添加color: Colors.white属性，完全隔离内容与背景模糊层，样式不会出现偏差。

完成以上修改后按钮样式就能和其他页面保持一致。

内容的提问来源于stack exchange，提问作者nguyen sam