Flutter 使用ImageFilter模糊并剪裁同一renderObject中的元素

好的，所以问题是:

1. 在这种情况下，Stack实际上并没有填满屏幕.它适合它的子元素们的尺寸，在这种情况下是Text号.你会想把它包在SizedBox()或其他什么东西里，这样它就会填满屏幕.
2. 您希望模糊背景，但仅限于边界内.所以，你要做的就是在剪贴层的画笔里添加模糊层.

所以我认为你想要做的是:

Corrected Screenshot个

import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter image filter blur demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Demo(),
    );
  }
}

class Demo extends StatefulWidget {
  const Demo({super.key});

  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  Offset offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: [
            const Text("hello welcome to the demo of the backdrop blur"),
            Transform.translate(
              offset: offset,
              child: GestureDetector(
                onPanUpdate: (d) {
                  setState(() {
                    offset += d.delta;
                  });
                },
                child: Blur(
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.red.withOpacity(0.3),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Blur extends SingleChildRenderObjectWidget {
  const Blur({
    Key? key,
    Widget? child,
  }) : super(key: key, child: child);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderBlur();
  }

  @override
  void updateRenderObject(BuildContext context, RenderBlur renderObject) {}
}

class RenderBlur extends RenderProxyBox {
  @override
  void paint(PaintingContext context, Offset offset) {
    final blurLayer = BackdropFilterLayer(
      filter: ui.ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      blendMode: BlendMode.srcOver,
    );
    final clipLayer = ClipPathLayer(
      clipPath: Path()..addRect(offset & size),
    );
    context.pushLayer(clipLayer, (context, offset) {
      context.addLayer(blurLayer);
      super.paint(context, offset); // This probably shouldn't be here, I don't know what you wanted so just try and move it around.
    }, offset);
  }
}