如何实现Widget组件透明度从100%到0%的渐变效果？

该效果无需引入第三方依赖，使用Flutter原生的ShaderMask组件即可快速实现，最终效果和你PS制作的示例完全一致。

核心原理是给目标Widget叠加一层透明度渐变的遮罩，通过BlendMode.dstIn混合模式，让遮罩的alpha通道直接控制子组件的显示透明度：

• 遮罩不透明的位置，子组件完全显示（透明度100%）
• 遮罩透明的位置，子组件完全隐藏（透明度0%）
• 中间过渡段自动形成透明度渐变效果

可复用封装代码 #

import 'package:flutter/material.dart';

class FadeTransparentBox extends StatelessWidget {
  final Widget child;
  // 渐变起止方向，默认从上到下渐变
  final AlignmentGeometry gradientStart;
  final AlignmentGeometry gradientEnd;
  // 渐变起始占比：0代表从组件最边缘开始渐变，0.7代表组件前70%区域完全不透明，最后30%过渡到全透明
  final double fadeStartRatio;

  const FadeTransparentBox({
    super.key,
    required this.child,
    this.gradientStart = Alignment.topCenter,
    this.gradientEnd = Alignment.bottomCenter,
    this.fadeStartRatio = 0.7,
  });

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      // 关键混合模式，不要随意修改
      blendMode: BlendMode.dstIn,
      shaderCallback: (Rect renderBounds) {
        return LinearGradient(
          begin: gradientStart,
          end: gradientEnd,
          colors: const [
            Colors.white,
            Colors.white,
            Color(0x00FFFFFF),
          ],
          stops: [0.0, fadeStartRatio, 1.0],
        ).createShader(renderBounds);
      },
      child: child,
    );
  }
}

使用方式 #

直接把你需要做渐变透明的盒子（包含背景、文本等任意内容）作为child传入即可，支持灵活调整方向和渐变范围：

// 示例：从上到下渐变透明的文本盒子
FadeTransparentBox(
  gradientStart: Alignment.topCenter,
  gradientEnd: Alignment.bottomCenter,
  fadeStartRatio: 0.6, // 从60%高度位置开始渐变
  child: Container(
    width: 300,
    padding: const EdgeInsets.all(16),
    color: Colors.lightBlue,
    child: const Text(
      "测试文本内容，整个容器包括背景色和文字都会沿着设定方向，从完全不透明逐步过渡到全透明",
      style: TextStyle(color: Colors.white, fontSize: 16, height: 1.5),
    ),
  ),
)

参数调整说明 #

• 需要修改渐变方向时，只需调整gradientStart和gradientEnd的对齐参数即可，比如从左到右渐变传Alignment.centerLeft和Alignment.centerRight，从右下角到左上角渐变传对应对角对齐值
• 需要调整渐变过渡的长短时，修改fadeStartRatio数值即可：数值越大，完全不透明的区域占比越高，渐变段越短；数值越小，渐变段越长
• 如果需要多方向同时渐隐（比如上下边缘都做透明过渡），只需替换shaderCallback中的渐变配置为对应多段渐变即可，核心逻辑不变

该实现为Flutter原生渲染，无额外性能损耗，不止支持文本盒子，图片、列表、复杂组合Widget都可以用这个方式实现渐变透明效果。

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