Flutter如何实现FragmentShader效果

在Flutter中如何使用FragmentShader实现自定义着色效果？我正在尝试创建一个动态的视觉效果，但不太清楚如何正确加载和运用GLSL着色器代码。能否提供一个完整的示例，包括如何将着色器文件打包到项目中、如何通过FragmentShader类加载并应用到Widget上？最好能说明下性能优化方面的注意事项。

2 回复

在Flutter中，使用CustomPaint和FragmentShader实现着色器效果。首先加载.frag文件，创建FragmentShader对象，然后在CustomPainter的paint方法中设置参数并绘制。

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


在Flutter中，FragmentShader（片段着色器）可以通过FragmentProgram和CustomPainter实现，用于自定义像素级渲染效果。以下是实现步骤：

1. 编写GLSL着色器文件

创建 .frag 文件（如 shader.frag）放在项目 shaders/ 目录下：

#version 460 core
out vec4 FragColor;
uniform vec2 uResolution;

void main() {
    vec2 uv = gl_FragCoord.xy / uResolution;
    FragColor = vec4(uv.x, uv.y, 0.5, 1.0); // 渐变效果示例
}

2. 在Flutter中加载着色器

import 'package:flutter/material.dart';

class ShaderDemo extends StatefulWidget {
  @override
  _ShaderDemoState createState() => _ShaderDemoState();
}

class _ShaderDemoState extends State<ShaderDemo> {
  late FragmentShader _shader;

  @override
  void initState() {
    _loadShader();
    super.initState();
  }

  Future<void> _loadShader() async {
    final program = await FragmentProgram.fromAsset('shaders/shader.frag');
    _shader = program.fragmentShader();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ShaderPainter(_shader),
      size: Size(300, 300),
    );
  }
}

3. 实现CustomPainter

class ShaderPainter extends CustomPainter {
  final FragmentShader shader;

  ShaderPainter(this.shader);

  @override
  void paint(Canvas canvas, Size size) {
    shader.setFloat(0, size.width);  // 传递分辨率参数
    shader.setFloat(1, size.height);
    
    canvas.drawRect(
      Rect.fromLTWH(0, 0, size.width, size.height),
      Paint()..shader = shader,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

4. 配置pubspec.yaml

flutter:
  shaders:
    - shaders/shader.frag

关键说明：

  • uniform参数：通过shader.setFloat(index, value)传递
  • 性能优化：复杂着色器建议配合RepaintBoundary使用
  • 支持特性：适用于渐变、噪波、图像处理等效果

此实现可在Flutter 2.5+版本运行，适用于需要高性能自定义渲染的场景。

回到顶部