BackdropFilter overlay outside Stack on PageView

Question

Seems like BackdropFilter on PageView overlay outside Page when scrolling. I expected that it applies only on parent widget. How to prevent this behaviour?

Code sample:

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 working sample: https://codepen.io/ioputin/pen/jOymamJ

Answer 1

As documentation says:

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.

So I had to wrap BackdropFilter with ClipRect

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