自定义RenderObject实现ImageFilter模糊与裁剪的异常问题

因特定需求需自定义RenderObject，无法使用现成的BackdropFilter和ClipPath组件，尝试在Stack的子组件上实现ImageFilter模糊效果。但当Stack包含其他子组件时裁剪功能失效，注释掉该子组件后功能恢复正常。

相关代码 #

import 'dart: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: Stack(
        children: [
          // 注释掉这行后裁剪功能恢复正常
          const Text("hello welcome to the demo of the backdrop blur"),
          Positioned(
            top: offset.dy,
            left: offset.dx,
            child: GestureDetector(
              onPanUpdate: (d) {
                setState(() {
                  offset += d.delta;
                });
              },
              child: SizedBox(
                width: 100,
                height: 100,
                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) {
      // 绘制子组件
    context.paintChild(child!, offset);

    final blurLayer = BackdropFilterLayer(
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
      blendMode: BlendMode.srcOver,
    );
    final clipLayer = ClipPathLayer(
      clipPath: Path()..addRect(offset & size),
    );

    context.addLayer(blurLayer);
    context.addLayer(clipLayer);

    super.paint(context, offset);
  }
}

现象截图 #

• 当前效果（Stack包含Text子组件时）：
  

• 正常效果（注释掉Stack首个Text子组件后）：
  

内容的提问来源于stack exchange，提问作者Ansh Rathod