Flutter中BackdropFilter拉伸过滚及转场动画时失效问题求助

问题现象 #

在Android Material3环境下，ListView默认使用StretchingOverscrollIndicator作为滚动行为。当将带有BackdropFilter的模糊容器（用于实现新拟态/玻璃态设计）作为ListView子项时，会出现以下问题：

• 过滚操作时，模糊效果消失
• 页面转场动画过程中，同样会出现模糊失效的情况

非Android环境下，通过自定义ScrollBehavior启用StretchingOverscrollIndicator也能复现该问题。

复现代码片段 #

Stack(
  children: [
    Text('a' * 10000),
    ListView.separated(
      itemCount: 2,
      itemBuilder: (context, index) => ClipRect(
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
          child: Container(
            height: 100,
            color: Colors.transparent,
          ),
        ),
      ),
      separatorBuilder: (context, index) => const Divider(),
    ),
  ],
)

完整复现代码（main.dart） #

import 'dart:ui';

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      /* For non-Android devices, the same phenomenon can be observed by activating the code below. */
      // builder: (context, child) => ScrollConfiguration(
      //   behavior: const ScrollBehaviorModified(),
      //   child: child!,
      // ),
      home: const MyHomePage(),
    );
  }
}

class ScrollBehaviorModified extends ScrollBehavior {
  const ScrollBehaviorModified();

  @override
  Widget buildOverscrollIndicator(
      BuildContext context, Widget child, ScrollableDetails details) {
    return StretchingOverscrollIndicator(
      axisDirection: details.direction,
      clipBehavior: Clip.hardEdge,
      child: child,
    );
  }

  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
        PointerDeviceKind.trackpad,
      };
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Stack(
        children: [
          Text('a' * 10000),
          ListView.separated(
            itemCount: 2,
            itemBuilder: (context, index) => ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
                child: Container(
                  height: 100,
                  color: Colors.transparent,
                ),
              ),
            ),
            separatorBuilder: (context, index) => const Divider(),
          ),
        ],
      ),
    );
  }
}

问题演示 #

已知信息与临时方案 #

• 推测问题与着色器相关，仅在Flutter 3.16及之后版本出现，Flutter 3.13版本无此问题
• 已确认官方存在对应问题工单
• 当前临时解决方案：回退到Flutter 3.13版本，等待官方修复

求助需求 #

寻求除禁用ListView的StretchingOverscrollIndicator之外的其他可行解决方案。

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