How to place one silverappbar over another?

Question

I want my silverapp bar in this format: my code is as follows:

body: CustomScrollView(slivers: [
    SliverAppBar(
      backgroundColor: Colors.black,
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          color: Colors.blue[100],
          margin: EdgeInsets.all(5),
          child: Column(
            children: [
              Row(
                children: [
                  AnimatedContainer(
                    height: 150,
                    width: 150,
                    margin: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: borderRadius,
                      color: color1,
                    ),
                    child: Image.network(
                      'https://thumbs.dreamstime.com/b/pizza-rustic-italian-mozzarella-cheese-basil-leaves-35669930.jpg',
                      height: 200,
                      width: 150,
                    ),
                    duration: Duration(seconds: 3),
                    curve: Curves.bounceInOut,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    child: Column(
                      // ignore: prefer_const_literals_to_create_immutables
                      children: [
                        Text(
                          'NAME: PIZZA',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    ),
    SliverAppBar(
      backgroundColor: Colors.black,
      expandedHeight: 200,
      flexibleSpace: FlexibleSpaceBar(
        background: Container(
          color: Colors.blue[50],
          margin: EdgeInsets.all(5),
          child: Column(
            children: [
              Row(
                children: [
                  AnimatedContainer(
                    height: 150,
                    width: 150,
                    margin: EdgeInsets.all(10),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                      borderRadius: borderRadius,
                      color: color1,
                    ),
                    child: Image.network(
                      'https://thumbs.dreamstime.com/b/pizza-rustic-italian-mozzarella-cheese-basil-leaves-35669930.jpg',
                      height: 200,
                      width: 150,
                    ),
                    duration: Duration(seconds: 3),
                    curve: Curves.bounceInOut,
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  Container(
                    child: Column(
                      // ignore: prefer_const_literals_to_create_immutables
                      children: [
                        Text(
                          'NAME: PIZZA',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
      ),
    ),

I have 4 more SilverAppBars with the same internal structure. How to place these app bars one over another as in the example image? I want the appbars to overlap each other and move in the same way as in the sample video.

Currently my app looks like this: