Flutter如何实现模糊效果（排除广告/推广）

在Flutter中如何实现图片或视图的模糊效果？我看到有些App的背景图会有毛玻璃效果，但不知道具体怎么实现。希望能提供一个清晰的实现方案，最好能附上代码示例。另外需要注意哪些性能问题？不要广告或推广内容，只要技术解决方案。

2 回复

Flutter中可通过BackdropFilter组件实现模糊效果。示例：

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

需配合ClipRect使用，sigmaX/Y控制模糊强度。

更多关于Flutter如何实现模糊效果（排除广告/推广）的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现模糊效果，主要通过BackdropFilter和ImageFilter.blur组件。以下是具体实现方法：

1. 基础模糊效果

import 'package:flutter/material.dart';

class BlurExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景内容
          Container(
            width: double.infinity,
            height: double.infinity,
            child: Image.network(
              'https://example.com/background.jpg',
              fit: BoxFit.cover,
            ),
          ),
          
          // 模糊层
          BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 5.0, // 水平模糊度
              sigmaY: 5.0, // 垂直模糊度
            ),
            child: Container(
              color: Colors.black.withOpacity(0.1), // 可调整透明度
            ),
          ),
        ],
      ),
    );
  }
}

2. 局部模糊效果

Container(
  width: 200,
  height: 200,
  child: Stack(
    children: [
      // 背景内容
      YourContentWidget(),
      
      // 局部模糊
      Positioned(
        bottom: 0,
        child: ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
            child: Container(
              width: 200,
              height: 50,
              color: Colors.white.withOpacity(0.2),
            ),
          ),
        ),
      ),
    ],
  ),
)

3. 高斯模糊组件封装

class BlurContainer extends StatelessWidget {
  final double sigma;
  final Widget child;
  final Color color;
  
  const BlurContainer({
    required this.child,
    this.sigma = 5.0,
    this.color = Colors.transparent,
  });
  
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: sigma, sigmaY: sigma),
        child: Container(
          color: color,
          child: child,
        ),
      ),
    );
  }
}

// 使用示例
BlurContainer(
  sigma: 8.0,
  color: Colors.white.withOpacity(0.2),
  child: YourWidget(),
)

参数说明：

  • sigmaX、sigmaY：模糊程度，值越大越模糊（通常2-10之间）
  • 建议配合ClipRect使用，限制模糊区域
  • 可通过调整容器颜色透明度控制模糊强度

这种方法性能较好，适用于对话框背景、底部导航栏等场景。

回到顶部