I have a problem with SliverPersistentHeaders. I have CustomScroll with CupertinoSliverNavigationBar and custom SliverPersistentHeader, with SearchTextField and button. My custom SliverPersistentHeader is floating. But when i scrolling back, it's staying behind the NavigationBar. What's wrong? How to implement this layout correctly?
This is initial state

This is overlap. My custom bar under the NavigationBar

My code here:
It's page layout
class GeneralBalancesScreenLayout extends StatelessWidget {
const GeneralBalancesScreenLayout({super.key});
@override
Widget build(BuildContext context) {
return CustomScrollView(slivers: [
//----------------------------------------------------------------------
//NavigationBar
//----------------------------------------------------------------------
const PlatformWidget(
defaultWidget: SizedBox.shrink(),
iosWidget: IosSliverNavigationBar(),
),
const PlatformWidget(
defaultWidget: SizedBox.shrink(), iosWidget: IosSearchBar()),
SliverList(
delegate: SliverChildBuilderDelegate(
(_, index) => const Center(child: Text("-----"))))
]);
}
}
It's custom bar
class IosSearchBar extends StatelessWidget {
const IosSearchBar({super.key});
@override
Widget build(BuildContext context) {
return SliverPersistentHeader(
floating: true,
delegate: GenericSliverHeader(
maxExtend: 55,
minExtend: 55,
backgroundColor:
CupertinoTheme.of(context).barBackgroundColor.withOpacity(1),
body: Stack(
fit: StackFit.expand,
children: [
Container(
color: CupertinoTheme.of(context).scaffoldBackgroundColor),
Align(
alignment: Alignment.bottomCenter,
child: Row(
children: [
const Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
child: CupertinoSearchTextField(),
)),
CupertinoButton(
child: const Text('Добавить'), onPressed: () {})
],
),
)
],
)),
);
}
}