How to do animated switcher with slivers in flutter

So I have a CustomScrollView with a SliverAppBar(floating: true, snap: true), a SliverPersistentHeader(pinned: true) a SliverList.

What I am trying to do is to click a button in the header and just pop a widget in the space taken by the SliverPersistentHeade and SliverList. I tried putting them inside a nestedScrollView and nesting SliverPersistentHeader and SliverList inside another scrollView but since the SliverAppBar and SliverPersistentHeader are not together it messes up the supposed effect when it(SliverAppBar) snaps up and off.

Why do I need it like that: I want to perform some animations with the elements in the appBar as the lower part transitions between the two pages kinda like animtions shared axis package

problems

• keep the persistantHeader on the first page
• keep the snap floating appbar feature
• transition the lower part

Note: Answers don't necessary need to depend on slivers. a possible way to achieve that will do

My code at the moment looks roughly like this

CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.white,
            floating: true,
            snap: true,
            titleSpacing: 0,
            elevation: 4,
            title: Row(
              children: [
                Expanded(
                  child: Container(
                    padding: EdgeInsets.only(top: 10, bottom: 10, left: 10),
                    child: Container(color: Colors.grey),
                    ),
                  ),
                ),
                Container(
                  child: LeadingButton(
                    color: lightShadeColor,
                    icon: Icons.qr_code_scanner_rounded,
                    iconColor: darkColor,
                    size: 37, // btnShadow: false
                  ),
                ),
              ],
            ),
          ),
          SliverPersistentHeader(
                  delegate: PersistentHeader(
                    widget: Row(
                      // Format this to meet your need
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        
                        Container(
                          padding: EdgeInsets.all(10),
                          child: Text('data'),
                        )
                      ],
                    ),
                  ),
                  pinned: true,
                ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return ListTile(
                title: Text('index $index'),
              );
            }),
          )
        ],
      ),