flutter - 颤振 | BackdropFilter() 有 ui 问题

Question

我不知道为什么一个 Container（左侧的红色）会受到 BackdropFilter 的“影响”，而绿色的（不是颜色特定的）不会（或者：我什至不知道那里发生了什么？ )，请帮助我或更正我的代码:)

这是我得到的结果（用不同的显示器检查）：

此页面的代码：

import 'dart:ui';

import 'package:flutter/material.dart';


class BlurDesktop extends StatefulWidget {
  const BlurDesktop({Key? key}) : super(key: key);

  @override
  _BlurDesktopState createState() => _BlurDesktopState();
}

class _BlurDesktopState extends State<BlurDesktop> {
  double barWidth = 260;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: double.infinity,
            width: barWidth,
            child: Stack(
              children: [
                Container(
                  color: Colors.black,
                  height: double.infinity,
                  width: barWidth,
                  child: Column(
                    children: [
                      Expanded(
                        child: Container(
                          width: barWidth,
                        ),
                      ),
                      Container(
                        height: 200,
                        width: barWidth,
                        alignment: Alignment.centerLeft,
                        child: Container(
                          height: 140,
                          width: 70,
                          decoration: BoxDecoration(
                            color: Color(0xFFFF706F),
                            borderRadius: BorderRadius.only(bottomRight: Radius.circular(70), topRight: Radius.circular(70))
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          width: barWidth,
                        ),
                      ),
                      Container(
                        height: 140,
                        width: barWidth,
                        alignment: Alignment.bottomRight,
                        child: Container(
                          height: 140,
                          width: 140,
                          decoration: BoxDecoration(
                            //color: Color(0xFFD286FE),
                            color: Colors.green,
                            borderRadius: BorderRadius.all(Radius.circular(70))
                          ),
                        ),
                      ),
                      Expanded(
                        child: Container(
                          width: barWidth,
                        ),
                      ),
                    ],
                  ),
                ),
                ClipRRect(
                  child: BackdropFilter(
                    filter: ImageFilter.blur(
                      sigmaX: 120,
                      sigmaY: 120,
                    ),
                    child: Container(
                      color: Colors.transparent,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}