Flutter Scroll flexibleSpaceBar content under the sliverAppBar content

Question

I'm looking to display some features in this area

and when the user scroll up to the top, oclude it by the top bar. The issue is that its being overlapped

The app bar consist of a sliverAppBar widget and following multiple setups I've not managed to occlude the flexible space. Here is the code:

SliverAppBar(
          primary: true,
          floating: true,
          collapsedHeight: 80,
          toolbarHeight: 80,
          backgroundColor: Colors.amber,
          pinned: true,
          expandedHeight: 320,
          elevation: 0,
          leading: Text("leading"),
          title: Text("tghe title"),
          actions: [Text("some actions!")],
          flexibleSpace: FlexibleSpaceBar.createSettings(
            minExtent: 0,
            maxExtent: 230,
            toolbarOpacity: 1,
            currentExtent: 0,
            child: FlexibleSpaceBar(
              
              collapseMode: CollapseMode.pin,
              stretchModes: [StretchMode.zoomBackground],
              title: Text("settings"),
            ),
          ),
        ),

Answer 1

Apparently the property titlePadding: EdgeInsetsDirectional.only(bottom: 20, top: 80) works as a workaround since the extra padding makes the flexibleSpaceBar content to be occluded by the title,leading and actions widgets when scrolled up.