Hide expandable SliverAppBar on scroll down, but do not expand until reached to top

Question

I want to hide the SliverAppBar on scroll down, but I don't want it to expand unless user is at the top, I also want non-expanded SliverAppBar to show when user is going up, but it shouldn't expand when user reaches to top.

pinned: true causes SliverAppBar never being hidden. floating: true causes SliverAppBar to expand when user scrolling up around mid scroll (should only expand when the user reaches to top)

https://www.youtube.com/shorts/dPSTaDdX3qI In the first half of the video, small part of the app bar doesn't show when user is scrolling down.

SliverAppBar is pinned in the second half video, so it never hides.

class TestScreen extends StatelessWidget {

  const TestScreen({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColors.black,
      body: CustomScrollView(
        slivers: [
          // sliver app bar
          const SliverAppBar(
            expandedHeight: 300,
            backgroundColor: Colors.white,
            floating: false,
            pinned: false,
            centerTitle: true,
            title: Text("Show on scroll down without expanding", style: TextStyle(color: Colors.black)),
          ),
          // sliver items 1
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(
                top: 20.0,
                left: 20,
                right: 20,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  color: Colors.red,
                  height: 400,
                ),
              ),
            ),
          ),

          // sliver items 2
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(
                top: 20.0,
                left: 20,
                right: 20,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  color: Colors.deepPurple[400],
                  height: 400,
                ),
              ),
            ),
          ),

          // sliver items 3
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(
                top: 20.0,
                left: 20,
                right: 20,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  color: Colors.deepPurple[400],
                  height: 400,
                ),
              ),
            ),
          ),

          // sliver items 4
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(
                top: 20.0,
                left: 20,
                right: 20,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  color: Colors.deepPurple[400],
                  height: 400,
                ),
              ),
            ),
          ),

          // sliver items 5
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.only(
                top: 20.0,
                left: 20,
                right: 20,
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(
                  color: Colors.deepPurple[400],
                  height: 400,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}