如何在Flutter中为文本/图片实现固定渐变透明度效果？

要实现文本平滑过渡到透明的固定渐变效果，最直接的方案是使用ShaderMask组件，它能给文本叠加渐变着色器，完全满足无动画的静态需求。

核心实现代码 #

import 'package:flutter/material.dart';

class GradientOpacityText extends StatelessWidget {
  final String text;
  final TextStyle style;
  final Gradient gradient;

  const GradientOpacityText({
    super.key,
    required this.text,
    required this.style,
    this.gradient = const LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.black, // 完全不透明
        Colors.transparent, // 完全透明
      ],
    ),
  });

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      // 用渐变作为着色器
      shaderCallback: (bounds) => gradient.createShader(
        Rect.fromLTWH(0, 0, bounds.width, bounds.height),
      ),
      // 混合模式：保留文本形状，用渐变的透明度控制显示
      blendMode: BlendMode.dstIn,
      child: Text(
        text,
        style: style,
      ),
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(
        child: GradientOpacityText(
          text: "渐变透明文本示例",
          style: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            color: Colors.black, // 文本基础颜色，渐变会覆盖透明度
          ),
        ),
      ),
    ),
  ));
}

关键细节说明 #

• 渐变方向调整：如果需要垂直方向的渐变，修改LinearGradient的begin和end为Alignment.topCenter和Alignment.bottomCenter即可。
• 颜色适配：如果文本是其他颜色，将渐变的起始色改为对应颜色（比如Colors.blue到Colors.blue.withOpacity(0)），保证渐变过渡自然。
• 混合模式选择：BlendMode.dstIn是核心，它会让渐变的透明度通道作用于文本，只保留文本的形状，同时应用渐变的透明效果。

内容的提问来源于stack exchange，提问作者This is the R