How to overlap SliverList on a SliverAppBar : <p>I'm trying to overlap a <code>SliverList</code> a few pixels over the <code>SliverAppBar</code>. Similar to <a href="https://stackoverflow.com/questions/53709575/allow-gridview-to-overlap-sliverappbar">this post</a>. I'd like the image in the <code>FlexibleSpaceBar</code> to go under the radius of my <code>SliverList</code>.
I'm attempting to achieve the below.</p>

<p><a href="https://i.stack.imgur.com/q045W.png" rel="noreferrer"><img src="https://i.stack.imgur.com/q045W.png" alt="enter image description here"></a> </p>

<p>I can only get the radius like so. Without the ability to overlap the <code>SliverList</code> onto he <code>SliverAppBar</code>.
<a href="https://i.stack.imgur.com/fNPT7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fNPT7.png" alt="enter image description here"></a></p>

<pre><code>  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: &lt;Widget&gt;[
          SliverAppBar(
            floating: false,
            expandedHeight: MediaQuery.of(context).size.height * 0.50,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network(pet.photos.first)
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate([
              Container(
                height: 40,
                decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30),
                  ),
                ),
              ),
            ]),
          )
        ],
      ),
    );
  }
</code></pre>

<p>Any direction would be appreciated, thanks!</p>
