Flutter中的BackdropFilter：实现背景模糊效果

Flutter中的BackdropFilter：实现背景模糊效果

5 回复

使用BackdropFilter配合ImageFilter.blur在Flutter中实现背景模糊效果。

更多关于Flutter中的BackdropFilter：实现背景模糊效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，使用BackdropFilter组件可以实现背景模糊效果。将BackdropFilter包裹在需要模糊的Widget上，并通过ImageFilter.blur设置模糊强度即可。

BackdropFilter 是 Flutter 中用于实现背景模糊效果的 widget。它通过应用 ImageFilter 来模糊其子 widget 后面的内容。通常与 ClipRect 结合使用，以防止模糊效果超出指定范围。

示例代码：

ClipRect(
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    child: Container(
      color: Colors.white.withOpacity(0.5),
      child: Center(child: Text('模糊背景')),
    ),
  ),
)

sigmaX 和 sigmaY 控制模糊强度，值越大越模糊。

BackdropFilter可在背景上应用模糊效果，需配合CustomPaint使用。

在Flutter中，BackdropFilter 是一个用于对子组件的背景进行滤镜处理的小部件，通常用于实现背景模糊效果。它通常与 Stack 和 ClipRect 结合使用，以确保滤镜只应用于指定的区域。

以下是一个简单的示例，展示如何使用 BackdropFilter 实现背景模糊效果：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              // 背景图片
              Image.network(
                'https://picsum.photos/500/500',
                fit: BoxFit.cover,
                width: double.infinity,
                height: double.infinity,
              ),
              // 模糊效果
              Positioned.fill(
                child: ClipRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                    child: Container(
                      color: Colors.black.withOpacity(0.2),
                    ),
                  ),
                ),
              ),
              // 前景内容
              Center(
                child: Text(
                  'Hello, Flutter!',
                  style: TextStyle(
                    fontSize: 40,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码说明：

  1. Stack：用于将多个小部件叠放在一起。
  2. Image.network：加载一张网络图片作为背景。
  3. ClipRect：用于裁剪子组件的显示区域，确保模糊效果只在指定区域内应用。
  4. BackdropFilter：应用模糊滤镜，ImageFilter.blur 用于设置模糊程度，sigmaX 和 sigmaY 控制模糊的强度。
  5. Container：用于设置模糊区域的背景颜色和透明度。

效果：

背景图片会被模糊处理，而前景的文本内容保持清晰。

你可以根据需要调整 sigmaX 和 sigmaY 的值来控制模糊的程度。

回到顶部