flutter/flutter issue: Clipping doesn't work properly with BackdropFilter

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(TestClipping());

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

  @override
  State<TestClipping> createState() => _TestClippingState();
}

class _TestClippingState extends State<TestClipping> {
  bool _blurTop = true;
  bool _blurBottom = true;
  bool _isReversedDirection = false;
  bool _isReversedOrder = false;

  @override
  Widget build(BuildContext context) {
    final children = [
      ClipRect(
        child: Container(
          color: Colors.blue,
          height: 150,
          width: 150,
          child: Center(
            child: _blurTop
                ? BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                    child: Container(
                      color: Colors.black.withOpacity(0.5),
                      height: 30,
                      width: 30,
                    ),
                  )
                : null,
          ),
        ),
      ),
      ClipRect(
        child: Container(
          color: Colors.amber,
          height: 150,
          width: 150,
          child: Center(
            child: _blurBottom
                ? BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                    child: Container(
                      color: Colors.black.withOpacity(0.5),
                      height: 30,
                      width: 30,
                    ),
                  )
                : null,
          ),
        ),
      ),
    ];

    return MaterialApp(
      home: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _blurTop = !_blurTop;
                });
              },
              child: Text("toggle top blur (works as expected without blur)"),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _blurBottom = !_blurBottom;
                });
              },
              child: Text(
                  "toggle bottom blur (just there to show that clipping sometimes works)"),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isReversedDirection = !_isReversedDirection;
                });
              },
              child: Text("reverse column directionality "),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _isReversedOrder = !_isReversedOrder;
                });
              },
              child: Text("reverse column children order"),
            ),
            Container(
              width: 300,
              color: Colors.red,
              child: ClipOval(
                child: Container(
                  height: 300,
                  width: 300,
                  color: Colors.green,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    verticalDirection: _isReversedDirection
                        ? VerticalDirection.up
                        : VerticalDirection.down,
                    children: _isReversedOrder
                        ? children.reversed.toList()
                        : children,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}