如何在 Flutter 中为应用程序的底层添加模糊效果，如 Windows 11 天气面板

用 Flutter 为应用程序的底层加上模糊效果

问题：
在 Flutter 中，我想给应用程序的底层（就像 Windows 11 中的天气面板）添加模糊效果。使用 BackdropFilter 只会模糊图片或子部件，而不是底层。

解决方案：
我们需要创建一个自定义渲染对象和一个小部件来直接绘制到场景中。

自定义渲染对象

import 'package:flutter/rendering.dart';

class BlurredBackgroundRenderObject extends RenderProxyBox {
  final double sigmaX;
  final double sigmaY;

  BlurredBackgroundRenderObject(this.sigmaX, this.sigmaY);

  @override
  void paint(PaintingContext context, Offset offset) {
    // 保存当前图层
    final canvas = context.canvas;
    canvas.saveLayer(offset & size, Paint());
    // 绘制子部件
    context.paintChild(child!, offset);
    canvas.restore();
    // 应用模糊效果
    canvas.saveLayer(offset & size, Paint()..imageFilter = ImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY));
    super.paint(context, offset);
    canvas.restore();
  }
}

自定义小部件

import 'package:flutter/material.dart';

class BlurredBackground extends SingleChildRenderObjectWidget {
  final double sigmaX;
  final double sigmaY;

  const BlurredBackground({required this.sigmaX, required this.sigmaY, required Widget child})
      : super(child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return BlurredBackgroundRenderObject(sigmaX, sigmaY);
  }

  @override
  void updateRenderObject(BuildContext context, BlurredBackgroundRenderObject renderObject) {
    renderObject.sigmaX = sigmaX;
    renderObject.sigmaY = sigmaY;
  }
}

在应用程序中使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BlurredBackground(
          sigmaX: 10,
          sigmaY: 10,
          child: Container(
            color: Colors.white,
            child: Text('Hello, world!'),
          ),
        ),
      ),
    );
  }
}

现在，你可以给应用程序的任何部分添加模糊效果了。

结论

通过创建自定义渲染对象和一个小部件，我们能够给 Flutter 应用程序的底层添加模糊效果。这允许我们创建类似于 Windows 11 天气面板的效果。

常见问题解答

1. 我可以调整模糊效果的强度吗？

• 是的，你可以通过调整 BlurredBackground 小部件中的 sigmaX 和 sigmaY 值来控制模糊效果的强度。

2. 这个效果会影响性能吗？

• 模糊效果的性能成本取决于模糊半径的大小和场景的复杂性。对于小模糊半径和简单的场景，性能影响通常可以忽略不计。

3. 我可以给应用程序的特定区域添加模糊效果吗？

• 是的，你可以通过使用 ClipRect 或 ClipPath 小部件来剪裁 BlurredBackground 小部件。

4. 这个技术可以用于任何 Flutter 版本吗？

• 是的，这个技术可以用于任何 Flutter 版本。

5. 如何将这个效果应用于 Material Design 组件？

• 你可以将 BlurredBackground 小部件包裹在任何 Material Design 组件周围。例如，要给 ElevatedButton 添加模糊效果，你可以使用以下代码：

Material(
  child: BlurredBackground(
    child: ElevatedButton(
      onPressed: () {},
      child: Text('Click me'),
    ),
  ),
)