When I use StickyHeader or SliverPinnedHeader combined with SliverAppBar, header goes under SliverAppBar. A video is clean an explanatory which shows the "Goalkeeper" is a Text under a StickyHeader. It actually sticks but it sticks just below the status bar. It ignores the SliverAppBar.
I have some workarounds like expanding a SizedBox to SliverAppBar's height. But this kind of solutions are not enough for me. I'd like to know the logic behind this behavior and solve it naturally.
Scaffold(
body: NestedScrollView(
floatHeaderSlivers: false,
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverAppBar(
floating: false,
pinned: true,
snap: false,
elevation: 0,
backgroundColor: Colors.transparent,
title: Row(
children: [
Expanded(
child: Text(
"Title",
style: Get.textTheme.titleMedium?.copyWith(color: Get.theme.colorScheme.onPrimary),
),
),
Press(
child: Icon(Icons.star, size: 20),
)
],
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(48),
child: const SizedBox(),
),
expandedHeight: 150,
flexibleSpace: Stack(
children: [
/** ... */
],
),
)
];
},
body: Expanded(
child: TabBarView(controller: controller.c, children: [
ListView(
children: [
CustomScrollView(
slivers: [for (int i = 0; i < 10; i++) StickyHeader(header: Text("Header"), content: Text("Content"))],
)
],
),
Text("Tab 2"),
Text("Tab 3"),
]),
),
))
