Flutter中如何实现blur效果

在Flutter中如何实现类似iOS或Android的毛玻璃模糊效果？目前尝试了BackdropFilter组件，但性能较差且边缘有锯齿。有没有更高效的实现方案？希望能支持动态调整模糊强度，并兼容不同平台的表现一致性。

2 回复

在Flutter中实现模糊效果，可以使用BackdropFilter或ImageFilter.blur。例如：

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: Container(color: Colors.transparent),
)

或者使用ClipRect包裹以限制模糊区域。

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


在Flutter中，可以通过以下几种方式实现模糊（blur）效果：

1. BackdropFilter（最常用）

适用于对任意widget添加模糊效果，通常配合Stack使用：

Stack(
  children: [
    // 背景内容
    YourBackgroundWidget(),
    
    // 模糊层
    BackdropFilter(
      filter: ImageFilter.blur(
        sigmaX: 5.0,  // 水平模糊度
        sigmaY: 5.0,  // 垂直模糊度
      ),
      child: Container(
        color: Colors.black.withOpacity(0.1), // 可选：添加半透明遮罩
      ),
    ),
  ],
)

2. ImageFiltered（推荐）

更现代的API，用法更简洁：

ImageFiltered(
  imageFilter: ImageFilter.blur(
    sigmaX: 10.0,
    sigmaY: 10.0,
  ),
  child: YourWidget(),
)

3. 高斯模糊（Gaussian Blur）

对于图片的模糊效果：

Image.network(
  'your_image_url',
  fit: BoxFit.cover,
).blur(sigmaX: 8, sigmaY: 8) // 需要导入flutter_image包

4. 使用第三方包

安装 flutter_blur 包：

dependencies:
  flutter_blur: ^1.0.0

使用：

Blur(
  blur: 10.0,
  blurColor: Colors.black,
  child: YourWidget(),
)

参数说明：

  • sigmaX/sigmaY：模糊程度，值越大越模糊
  • 常用范围：2.0-15.0
  • 性能考虑：模糊效果较耗性能，建议适度使用

选择哪种方式取决于具体需求，BackdropFilter和ImageFiltered是最常用的原生解决方案。

回到顶部