Transform组件角度为-90度时BackdropFilter模糊滤镜不显示问题

问题原因 #

当内层Transform的rotateX设为-90度时，容器平面会与相机视角完全垂直，此时BackdropFilter的模糊采样逻辑会因为没有有效可见的渲染区域（投影成一条线）而无法正常工作，导致整个内容被渲染优化机制剔除不显示。而角度改为-91度时，容器有微小倾斜，存在可见投影区域，所以能正常渲染；移除BackdropFilter后，容器本身的渲染逻辑不会因为极端角度被完全优化，因此也能显示。

解决方案 #

以下是几种可行的修复方式：

1. 给旋转角度添加微小偏差

将-90度调整为接近-90度的角度（比如-89.9度），视觉上几乎无差别，但能避开极端垂直的情况：

Transform(
  alignment: Alignment.topLeft,
  transform: Matrix4.identity()..rotateX(vm.radians(-89.9)), // 用微小偏差替代-90度
  child: Container(
    width: 100,
    height: 200,
    color: Colors.grey.shade200,
  ),
),

2. 给旋转后的容器添加极小的Z轴偏移

通过给变换矩阵添加微小的Z轴位移，让容器即使在90度旋转时也有可见的厚度，确保BackdropFilter能采样到有效区域：

Transform(
  alignment: Alignment.topLeft,
  transform: Matrix4.identity()
    ..rotateX(vm.radians(-90))
    ..translate(0, 0, 0.1), // 添加极小Z轴偏移
  child: Container(
    width: 100,
    height: 200,
    color: Colors.grey.shade200,
  ),
),

3. 调整BackdropFilter的作用范围

避免使用Positioned.fill让模糊覆盖整个Stack，而是将BackdropFilter与旋转容器绑定，只模糊容器区域：

Stack(children: [
  Transform(
    alignment: Alignment.topLeft,
    transform: Matrix4.identity()..rotateX(vm.radians(-90)),
    child: Container(
      width: 100,
      height: 200,
      color: Colors.grey.shade200,
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
        child: Container(color: Colors.transparent),
      ),
    ),
  ),
]),

完整修复示例代码 #

这里以添加Z轴偏移的方案为例，完整代码如下：

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as vm;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateX(vm.radians(20))
              ..rotateY(vm.radians(-30)),
            child: Stack(children: [
              Transform(
                alignment: Alignment.topLeft,
                transform: Matrix4.identity()
                  ..rotateX(vm.radians(-90))
                  ..translate(0, 0, 0.1), // 新增Z轴偏移
                child: Container(
                  width: 100,
                  height: 200,
                  color: Colors.grey.shade200,
                ),
              ),
              Positioned.fill(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                  child: Container(color: Colors.transparent),
                ),
              ),
            ]),
          ),
        ),
      ),
    );
  }
}

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