Widget scrolls under cupertino sliver navigation bar

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),
                ),
          ),
        ],
      ),
    );
  }
}