Flutter：Colors.transparent导致渐变背景变暗的解决方法

我尝试给ElevatedButton设置渐变背景，编写了如下代码：

Container(
            height: 100,
            width: 100,
            decoration: const BoxDecoration(
                gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [
                Color(0xFFFE1871),
                Color(0xFFFD0E38),
                Color(0xFFFF0205),
              ],
            )),
            child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent),
                onPressed: () {},
                child: const Text(
                  'S\'inscrire',
                )),
          )

但实际显示的渐变颜色比预期要深：

预期效果：

实际效果：

看起来是Colors.transparent的默认透明度导致的问题，该如何修复？

修复方案 #

问题根源是ElevatedButton默认自带**墨水涟漪（InkWell）**效果及背景遮罩，即使设置backgroundColor: Colors.transparent，按钮的默认半透明叠加层会让下层Container的渐变颜色显得更深。

方案1：修改ElevatedButton的样式，移除默认遮罩和效果

在ElevatedButton.styleFrom中添加以下配置，彻底移除按钮的默认背景、阴影和点击覆盖层：

Container(
  height: 100,
  width: 100,
  decoration: const BoxDecoration(
      gradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    colors: [
      Color(0xFFFE1871),
      Color(0xFFFD0E38),
      Color(0xFFFF0205),
    ],
  )),
  child: ElevatedButton(
      style: ElevatedButton.styleFrom(
          backgroundColor: Colors.transparent,
          shadowColor: Colors.transparent, // 移除按钮阴影
          elevation: 0, // 取消按钮 elevation 效果
          overlayColor: Colors.transparent), // 取消点击时的半透明覆盖层
      onPressed: () {},
      child: const Text('S\'inscrire')),
)

方案2：用InkWell替代ElevatedButton（更轻量）

如果不需要ElevatedButton的额外样式，直接使用Container包裹InkWell和文本，既能保留点击反馈，又能完整显示渐变背景：

Container(
  height: 100,
  width: 100,
  decoration: const BoxDecoration(
      gradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    colors: [
      Color(0xFFFE1871),
      Color(0xFFFD0E38),
      Color(0xFFFF0205),
    ],
  )),
  child: InkWell(
    onTap: () {},
    splashColor: Colors.white.withOpacity(0.3), // 自定义点击涟漪的颜色和透明度
    child: const Center(
      child: Text('S\'inscrire'),
    ),
  ),
)

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