BackdropFilter 叠加在 PageView 的 Stack 之外

Question

滚动时，PageView 上的 BackdropFilter 似乎覆盖在 Page 外。我预计它只适用于父部件。如何防止这种行为？

代码示例：

class PageViewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
        itemCount: 6,
        itemBuilder: (context, index) => Page(text: 'Page $index'),
      ),
    );
  }
}

class Page extends StatelessWidget {
  final String text;

  const Page({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Text(_getRandomString(6000)),
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
          child: Container(color: Colors.black.withOpacity(0.1)),
        ),
        Center(
          child: Text(
            text,
            style: Theme.of(context).textTheme.headline2,
          ),
        ),
      ],
    );
  }
}

Codepen 工作示例：https://codepen.io/ioputin/pen/jOymamJ

Answer 1

如文档所述：

The filter will be applied to all the area within its parent or ancestor widget's clip. If there's no clip, the filter will be applied to the full screen.

所以我不得不用 ClipRect 包装 BackdropFilter

ClipRect(
          child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
            child: Container(color: Colors.black.withOpacity(0.1)),
          ),
        ),

BackdropFilter 叠加在 PageView 的 Stack 之外

BackdropFilter overlay outside Stack on PageView

flutter

flutter-pageview