Flutter BackdropFilter filter

牛马1112026-04-12 20:35

在 Flutter 的 BackdropFilter 里，filter 就是你要给背景加的滤镜效果，最常用的就是高斯模糊。

我用最简单、最实用的方式给你讲清楚👇

1. 最常用：模糊效果

dart

复制代码

ImageFilter.blur({
  double sigmaX = 0.0,  // 水平模糊强度
  double sigmaY = 0.0,  // 垂直模糊强度
  TileMode tileMode = TileMode.clamp,
})

直接写：

dart

复制代码

filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),

sigma 越大 → 越模糊
一般 5～15 最舒服

2. 必须导入

dart

复制代码

import 'dart:ui';

不然找不到 ImageFilter。

3. 完整最小示例

dart

复制代码

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      width: 200,
      height: 200,
      color: Colors.white.withOpacity(0.1),
    ),
  ),
)

4. 其他 filter（很少用）

缩放：ImageFilter.scale(1.2)
位移：ImageFilter.offset(5,5)
旋转：ImageFilter.rotate(pi/4)
矩阵：ImageFilter.matrix(...)

日常做毛玻璃 只需要 blur。

5. 常见坑

filter 不能为空
不加 ClipRRect 会全屏模糊
子组件必须有一点透明度，否则看不见模糊效果