flutterdartsliverappbar

Flutter Scroll flexibleSpaceBar content under the sliverAppBar content

I'm looking to display some features in this area

enter image description here

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

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"),
            ),
          ),
        ),
Solution

  • 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. enter image description here