flutter如何使用ShaderMask实现特效

在Flutter中，如何使用ShaderMask实现图片渐变遮罩效果？我在官方文档看到ShaderMask可以通过shader参数实现特效，但实际使用时发现效果不理想，比如想实现从顶部到底部的线性渐变遮罩，代码写出来后要么不显示效果，要么渐变方向不对。能否提供一个完整的示例代码，说明如何正确配置blendMode和shader参数来实现常见的遮罩特效？最好能解释下ShaderMask的工作原理和性能注意事项。

2 回复

在Flutter中使用ShaderMask实现特效的步骤：

  1. 创建ShaderMask组件
  2. 定义blendMode混合模式
  3. 创建shaderCallback返回渐变
  4. 包裹需要应用特效的子组件

示例代码：

ShaderMask(
  blendMode: BlendMode.srcIn,
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.red, Colors.blue],
    ).createShader(bounds);
  },
  child: Text('特效文字'),
)

更多关于flutter如何使用ShaderMask实现特效的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，ShaderMask组件可以通过着色器（Shader）为子组件创建各种视觉特效，如渐变遮罩、图像遮罩或自定义着色器效果。以下是基本用法和示例：

1. 基本结构

ShaderMask(
  shaderCallback: (Rect bounds) {
    // 返回一个Shader对象
  },
  blendMode: BlendMode.srcIn, // 混合模式
  child: YourWidget(), // 需要应用特效的子组件
)

2. 线性渐变示例

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.red, Colors.blue],
    ).createShader(bounds);
  },
  blendMode: BlendMode.srcIn,
  child: Text(
    '渐变文字',
    style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
  ),
)

3. 径向渐变示例

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.center,
      colors: [Colors.yellow, Colors.transparent],
      stops: [0.0, 0.5],
    ).createShader(bounds);
  },
  blendMode: BlendMode.dstOut,
  child: Container(
    height: 200,
    width: 200,
    color: Colors.blue,
  ),
)

4. 图像着色器示例

ShaderMask(
  shaderCallback: (Rect bounds) async {
    return ImageShader(
      await _loadImage(), // 加载图片的方法
      TileMode.repeated,
      TileMode.repeated,
      Matrix4.identity().storage,
    );
  },
  child: Container(
    color: Colors.white,
    child: Text('图片纹理文字'),
  ),
)

// 图片加载方法
Future<Image> _loadImage() async {
  final Completer<Image> completer = Completer();
  final image = AssetImage('assets/texture.png');
  final config = ImageConfiguration();
  image.resolve(config).addListener(ImageStreamListener((info, _) {
    completer.complete(info.image);
  }));
  return completer.future;
}

关键参数说明：

  • shaderCallback: 必须返回一个Shader对象，常用有LinearGradient/RadialGradient创建的渐变着色器
  • blendMode: 混合模式，控制着色器与子组件的混合方式，如：
    • BlendMode.srcIn: 显示交集部分
    • BlendMode.dstOut: 显示差异部分
  • child: 需要应用特效的任意组件

使用技巧：

  1. 通过调整渐变的colors和stops创建平滑过渡
  2. 结合AnimationController实现动态特效
  3. 使用自定义FragmentShader实现高级GLSL特效

这种方案特别适合创建文字特效、图像处理和各种视觉动画效果。

回到顶部