Widget scrolls under cupertino sliver navigation bar - flutter

Question

When using the cupertino sliver navigation bar, the body scrolls under it.
I tried using nested scroll view but even that resulted in the same behavior
class MainScreen extends StatefulWidget {
const MainScreen({Key? key}) : super(key: key);
#override
State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CustomScrollView(
slivers: [
CupertinoSliverNavigationBar(
brightness: Brightness.dark,
padding: EdgeInsetsDirectional.zero,
largeTitle: Text(
'Tasks',
style: appBarTextStyle,
),
trailing: CupertinoButton(
onPressed: () {}, child: primaryIcon(Icons.search)),
leading: CupertinoButton(
onPressed: () {}, child: primaryIcon(Icons.menu)),
),
SliverFillRemaining(
child: Container(
width: double.infinity,
padding: (MediaQuery.of(context).size.width < 768)
? const EdgeInsets.symmetric(
horizontal: 15.0, vertical: 15.0)
: const EdgeInsets.symmetric(
horizontal: 35.0, vertical: 15.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
filteredWidget(
context,
'Scheduled',
'No scheduled tasks',
arrayController.scheduledTodos,
Icons.schedule),
filteredWidget(
context,
'Today',
'Schedule a task for today',
arrayController.todayTodos,
Icons.calendar_today),
],
),
const SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
filteredWidget(
context,
'Completed',
'No completed tasks',
arrayController.doneTodos,
Icons.done_rounded),
filteredWidget(context, 'All', 'No tasks yet',
arrayController.allTodos, Icons.task)
],
),
],
)),
)
],
),
);
}
}
Here is the full code on Github
Reproducible example:
import 'package:flutter/cupertino.dart';
void main() => runApp(const SliverNavBarApp());
class SliverNavBarApp extends StatelessWidget {
const SliverNavBarApp({super.key});
#override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: SliverNavBarExample(),
);
}
}
class SliverNavBarExample extends StatelessWidget {
const SliverNavBarExample({super.key});
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
// A ScrollView that creates custom scroll effects using slivers.
child: CustomScrollView(
// A list of sliver widgets.
slivers: <Widget>[
const CupertinoSliverNavigationBar(
leading: Icon(CupertinoIcons.person_2),
// This title is visible in both collapsed and expanded states.
// When the "middle" parameter is omitted, the widget provided
// in the "largeTitle" parameter is used instead in the collapsed state.
largeTitle: Text('Contacts'),
trailing: Icon(CupertinoIcons.add_circled),
),
// This widget fills the remaining space in the viewport.
// Drag the scrollable area to collapse the CupertinoSliverNavigationBar.
SliverFillRemaining(
child: Container(
height: 100.0,
width: double.infinity,
padding: (MediaQuery.of(context).size.width < 768)
? const EdgeInsets.symmetric(
horizontal: 15.0, vertical: 15.0)
: const EdgeInsets.symmetric(
horizontal: 35.0, vertical: 15.0),
),
),
],
),
);
}
}