title: In Flutter, how to create a SliverAppBar with frosted glass effect?
body: <p>I want to create a top app bar similar to the one in the Apple News app.</p>
  
  <p>It's a bit difficult to see the blur in the screenshot because the bar is so thin, but you get the idea.</p>
  
  <p><a href="https://i.stack.imgur.com/Jnq3k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jnq3k.png" alt="screenshot"></a></p>
  
  <p>I want the bar to expand and contract by scrolling and be pinned at the top when contracted, just like in the screenshot, the SliverAppBar does all that, except that I can't wrap it in ClipRect, BackdropFilter and Opacity to create the frosted glass effect because CustomScrollView only takes RenderSliver child classes.</p>
  
  <p>My test code:</p>
  
  <pre><code>Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: &lt;Widget&gt;[
        SliverAppBar(
          title: Text('SliverAppBar'),
          elevation: 0,
          floating: true,
          pinned: true,
          backgroundColor: Colors.grey[50],
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://i.imgur.com/cFzxleh.jpg", fit: BoxFit.cover)
          ),
        )
        ,
        SliverFixedExtentList(
          itemExtent: 150.0,
          delegate: SliverChildListDelegate(
            [
              Container(color: Colors.red),
              Container(color: Colors.purple),
              Container(color: Colors.green),
              Container(color: Colors.orange),
              Container(color: Colors.yellow),
              Container(color: Colors.pink,
                child: Image.network("https://i.imgur.com/cFzxleh.jpg", fit: BoxFit.cover)
              ),
            ],
          ),
        ),
      ],
    );
  }
  </code></pre>
  
  <p>Is there a way to achieve what I want? </p>