Flutter Visual Effects 用于在 Flutter 中实现或审查高级视觉渲染效果,例如毛玻璃或液态玻璃、背景模糊、折射、着色器、自定义绘制、发光、遮罩等。其核心思路是把期望的材质或光学行为转换为可维护的 Flutter 渲染栈,而不是把某个特效包当作设计系统来使用。
职责范围 该技能负责效果保真度、图层合成、模糊与折射实现、着色器或 CustomPainter 选型、效果分组、平台与后端回退,以及渲染效果的验证。它同时明确了边界:产品是否应使用某效果,交由 flutter-ui-design 判断;时间、编排、弹簧、Hero 及中断行为交由 flutter-animation;卡顿测量诊断交由 flutter-performance;原生视图或平台通道交由 flutter-platform-integration。
预检 需要检查 pubspec.yaml、Flutter/Dart 约束、启用的平台、已有的图形包,以及目标表面周边的渲染代码。需要在相同内容、背景、状态和视口下检查提供的参考。孤立的一个半透明矩形,不足以作为依赖背景的特效证据。需要明确真正重要的光学行为:模糊、着色、边缘高光、深度、折射、形状融合、发光、噪点或响应式变形。需要确定要求的平台覆盖范围、可接受的保真度损失、无障碍回退方案,以及代表性硬件是否可被性能分析。应从项目当前渲染方案和依赖出发。对足够好的既有特效实现应予以保留,不因风格偏好而替换为核心代码或另一个包。
按证据选择,而非按理念选择 应复用项目中已存在且足够好的方案或包,包括其主题与回退行为。对于 Flutter 核心能清晰表达的简单效果,使用 decoration、渐变、遮罩、阴影、CustomPainter 或裁剪后的 BackdropFilter;当过滤的是一个已知子项而非既有背景时使用 ImageFiltered。对于复杂且常见的能力,若维护良好的包能实质降低实现风险并满足项目的 SDK、渲染器、平台、许可证、维护与性能约束,则使用该包。当效果是产品特有、可接受的包无法满足保真度或平台要求、或可测量的控制力值得维护成本时,使用自定义片元着色器或渲染器。仅当原生渲染本身即为需求时使用原生集成;对其他所有受支持目标保留明确行为。决策记录必须写明所检查的既有方案、为何核心/包/自定义/原生是最小且忠实的选择,以及哪些证据会推翻该选择。不得仅因某个包的演示与参考相似就引入该包,也不应在已有足够好的维护依赖能提供成熟基础设施时手写。
当已存在特效包或共享渲染器时,在提出代码前应显式检查其 pubspec/lockfile 条目、源码使用、主题契约、支持目标与回退。保留稳定的修改前基准,修改后在相同内容与视口下比较,并将截图或性能测量标注为“计划中”与“已观察”。检查后认为足够的包应在其基础上扩展,而不是被一个并行渲染器替代。对于普通核心材质实现,应明确写出决策记录:BackdropFilter 采样表面后方已绘制内容,ImageFiltered 过滤一个自有子项,未新增特效包,装饰性图层不暴露语义,也不暴露按压、悬停或焦点交互。
实现约束 将过滤器裁剪到最小有用边界;无界的背景过滤器可能处理远超可见表面的场景。玻璃应作为图层构建:采样背景、可控模糊或折射、着色、边框/高光,然后是内容。仅靠透明度不是玻璃。光学效果应位于语义与命中测试之后。装饰性或只读图层不得暴露按压、悬停、焦点或交互发光等能力;只有真实控件才接收它们。在 SDK 与合成允许的情况下,复用或分组共享特效层。不要在每个滚动行后方放置独立的实时模糊或着色器。保持特效配置语义化且集中管理,为不支持的渲染器、降低透明度、高对比度和受限硬件提供不透明或更低成本替代方案。形状变形时保持稳定身份。动画所有者控制时间;特效层从该状态推导几何与 uniform。不得声称与 Apple 原生材质像素级一致。应报告哪些可迁移属性被复现、哪些原生光学行为被近似。
条件参考 当需要在 Flutter 中复现 SwiftUI、Liquid Glass、Material、PhaseAnimator 或匹配几何参考时,阅读 iOS 效果转换相关内容。当涉及自定义 GLSL、FragmentProgram、背景扭曲、特效包、渲染器兼容性或 GPU 成本时,阅读着色器、包与性能相关内容。
验证 在代表性安静与繁忙背景、浅色与深色主题下渲染该效果。比较正常、高对比度以及不透明或低成本回退基准时,保持视口、内容、特效几何与交互状态一致。在相关处捕获交互或变形状态。检查可读性、裁剪、边缘伪影、滚动行为、文字缩放、高对比度、减弱动效,以及可用的降低透明度路径。黄金测试可以锁定确定性几何与绘制输出,但涉及平台合成、系统边框或后端特定着色器的论断需要设备截图。在代表性硬件上以 profile 模式分析非平凡模糊、着色器或持续动画效果;报告所测试的渲染器、设备类别、场景与回退,而不是从 debug 模式泛化。
来源(原文所列) Custom drawing and graphics;Writing and using fragment shaders;BackdropFilter;ImageFilter。