Flutter Shader 效果：GPU 加速的视觉盛宴

Flutter Shader 效果GPU 加速的视觉盛宴当 Flutter 遇见 GLSL移动端的视觉可能性被彻底打开。一、为什么要用 Shader作为一名追求像素级还原的 UI 匠人我深知标准 widget 的局限。Shader 让我们能够直接在 GPU 上运行代码创造出流畅的渐变、扭曲、模糊等效果——这些用传统方式实现往往会卡顿但 Shader 能让它们以 60fps 流畅运行。二、Fragment Shader 基础1. 简单的渐变 Shader// shaders/gradient.frag #version 460 core precision mediump float; #include flutter/runtime_effect.glsl uniform vec2 uSize; uniform float uTime; out vec4 fragColor; void main() { vec2 uv FlutterFragCoord().xy / uSize; vec3 color1 vec3(0.4, 0.49, 0.92); // #667eea vec3 color2 vec3(0.46, 0.29, 0.64); // #764ba2 vec3 finalColor mix(color1, color2, uv.y sin(uTime) * 0.1); fragColor vec4(finalColor, 1.0); }2. 在 Flutter 中使用import package:flutter/material.dart; import dart:ui as ui; class ShaderGradient extends StatefulWidget { override _ShaderGradientState createState() _ShaderGradientState(); } class _ShaderGradientState extends StateShaderGradient with SingleTickerProviderStateMixin { late Futureui.FragmentProgram _program; late AnimationController _controller; override void initState() { super.initState(); _program ui.FragmentProgram.fromAsset(shaders/gradient.frag); _controller AnimationController( vsync: this, duration: Duration(seconds: 3), )..repeat(); } override Widget build(BuildContext context) { return FutureBuilderui.FragmentProgram( future: _program, builder: (context, snapshot) { if (!snapshot.hasData) return CircularProgressIndicator(); return AnimatedBuilder( animation: _controller, builder: (context, child) { return CustomPaint( size: Size.infinite, painter: ShaderPainter( shader: snapshot.data!.fragmentShader(), time: _controller.value * 3, ), ); }, ); }, ); } override void dispose() { _controller.dispose(); super.dispose(); } } class ShaderPainter extends CustomPainter { final ui.FragmentShader shader; final double time; ShaderPainter({required this.shader, required this.time}); override void paint(Canvas canvas, Size size) { shader.setFloat(0, size.width); shader.setFloat(1, size.height); shader.setFloat(2, time); final paint Paint()..shader shader; canvas.drawRect(Offset.zero size, paint); } override bool shouldRepaint(covariant CustomPainter oldDelegate) true; }三、高级 Shader 效果1. 水波纹效果// shaders/water.frag #version 460 core precision mediump float; #include flutter/runtime_effect.glsl uniform vec2 uSize; uniform float uTime; uniform sampler2D uTexture; out vec4 fragColor; void main() { vec2 uv FlutterFragCoord().xy / uSize; // 创建波纹 float wave1 sin(uv.x * 10.0 uTime * 2.0) * 0.01; float wave2 cos(uv.y * 8.0 uTime * 1.5) * 0.01; vec2 distortedUV uv vec2(wave1, wave2); fragColor texture(uTexture, distortedUV); }2. 霓虹发光效果// shaders/neon.frag #version 460 core precision mediump float; #include flutter/runtime_effect.glsl uniform vec2 uSize; uniform float uTime; out vec4 fragColor; float noise(vec2 p) { return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453); } void main() { vec2 uv FlutterFragCoord().xy / uSize; vec2 center vec2(0.5, 0.5); float dist distance(uv, center); float glow 0.02 / dist; // 动态颜色 vec3 color vec3( 0.5 0.5 * sin(uTime dist * 10.0), 0.5 0.5 * sin(uTime dist * 10.0 2.0), 0.5 0.5 * sin(uTime dist * 10.0 4.0) ); fragColor vec4(color * glow, 1.0); }3. 毛玻璃效果// shaders/blur.frag #version 460 core precision mediump float; #include flutter/runtime_effect.glsl uniform vec2 uSize; uniform sampler2D uTexture; out vec4 fragColor; void main() { vec2 uv FlutterFragCoord().xy / uSize; vec4 color vec4(0.0); // 简单的盒式模糊 float blurSize 0.01; for(float x -4.0; x 4.0; x 1.0) { for(float y -4.0; y 4.0; y 1.0) { vec2 offset vec2(x, y) * blurSize; color texture(uTexture, uv offset); } } color / 81.0; // 添加一点颜色调整 color.rgb pow(color.rgb, vec3(1.0 / 1.2)); fragColor color; }四、性能优化减少 Uniform 更新只在必要时更新 shader 参数使用 RepaintBoundary避免不必要的重绘合理精度移动端使用mediump桌面端可用highp纹理尺寸避免过大的纹理采样五、实战案例动态背景class AnimatedShaderBackground extends StatelessWidget { override Widget build(BuildContext context) { return ShaderMask( shaderCallback: (bounds) { return LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Colors.purple.withOpacity(0.8), Colors.blue.withOpacity(0.8), Colors.teal.withOpacity(0.8), ], ).createShader(bounds); }, blendMode: BlendMode.srcATop, child: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Colors.black, Colors.grey[900]!], ), ), ), ); } }Shader 是 GPU 的诗歌每一行代码都在绘制光的轨迹。#flutter #shader #glsl #gpu #animation