flutter如何实现毛玻璃效果

在Flutter中如何实现类似iOS系统的毛玻璃效果？我看到一些APP的背景模糊效果非常好看，想在自己的项目中使用。请问应该使用哪个Widget或插件？是否需要手动处理图片模糊，还是有现成的组件可以直接实现？最好能提供一个简单的代码示例。

2 回复

在Flutter中，可以通过BackdropFilter组件实现毛玻璃效果。使用ImageFilter.blur设置模糊参数，并配合ClipRect裁剪区域。示例代码：

ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    child: Container(color: Colors.white.withOpacity(0.2)),
  ),
)

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


在 Flutter 中，可以通过 BackdropFilter 组件实现毛玻璃效果。以下是具体实现方法：

核心代码：

import 'package:flutter/material.dart';

class FrostedGlassDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://example.com/background.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
          // 毛玻璃效果层
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  width: 300,
                  height: 200,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: Colors.white.withOpacity(0.1)),
                  ),
                  child: Center(
                    child: Text(
                      '毛玻璃效果',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

关键点说明：

  1. BackdropFilter：核心组件，通过 ImageFilter.blur 设置模糊度
  2. sigmaX/sigmaY：模糊度参数，数值越大越模糊（建议5-15）
  3. ClipRRect：裁剪圆角，使模糊效果更自然
  4. 半透明背景：使用 Colors.white.withOpacity(0.2) 增强视觉效果

注意事项：

  • 确保 BackdropFilter 有明确的尺寸限制
  • 性能考虑：避免在动画中频繁使用高模糊度
  • 可配合 Opacity 或 ColorFilter 调整色调

这种实现方式适用于卡片、对话框、底部导航栏等需要突出显示内容的场景。

回到顶部