How to keep “SliverPersistentHeader” pinned to the top until item one of “SliverList” is reached after scrolling down?

Question

I am using SliverPersistentHeader with SliverList in CustomScrollView . I don't want my SliverPersistentHeader to come down until item one (index:0) of SliverList is reached. Even if I am at index 50 of sliverlist still header comes down as I scroll down. Is there any shortcut way to achieve this?

Here is what I am getting ==>> https://i.imgur.com/yl48Kx2.gif

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Material(
        child: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              delegate: MySliverAppBar(expandedHeight: 250),
              pinned: true,
              floating: true,
            ),
            SliverSafeArea(
              sliver: SliverAppBar(
                pinned: true,
                backgroundColor: Color(0xffA2B8A1),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => ListTile(
                  title: Text("Index: $index"),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Solution

Try setting pinned to true and keeping floating as false. Heres what each one does.

Floating: Whether the header should immediately grow again if the user reverses the scroll direction.

Pinned: Whether to stick the header to the start of the viewport once it has reached its minimum size.