Flutter 边缘渐隐遮罩实现指南

核心思路

Flutter 实现边缘渐隐最正统的方式是 ShaderMask + LinearGradient，关键参数只有一个：

blendMode: BlendMode.dstIn

这个 blendMode 告诉 Flutter：用 Shader 的 alpha 通道来决定子组件的不透明度。Gradient 两端是 Colors.transparent（alpha=0），中间是 Colors.white（alpha=1），合成后子组件两端自然渐隐。

---

三种使用场景小结

① 静态场景（背景色固定）：用上面的基础写法，5 行搞定。

② 通用封装（推荐）：点击「封装成组件」Tab，EdgeFadeMask 支持水平/垂直、单侧/双侧渐隐，项目中复用。

③ 动态渐隐（仿抖音效果）：点击「结合 ScrollView」Tab，监听 ScrollController 动态控制 fadeLeft / fadeRight，滚到头时对应侧消失渐隐效果，体验更自然。

---

vs. Stack 叠加方案

Stack + 渐变 Container 虽然更好理解，但有个致命缺点：渐变色必须和背景色完全一致，一旦背景是图片或复杂渐变背景就完全失效。ShaderMask 无此限制，是工程上更健壮的选择。