Flutter: SliverAppBar's bottom overlapping on FlexibleSpaceBar title

Question

I want to make a notes app like

I have tried this code

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            pinned: true,
            stretch: true,
            expandedHeight: 100.0,
            flexibleSpace: FlexibleSpaceBar(
              titlePadding: const EdgeInsets.only(left: padding),
              centerTitle: false,
              title: Text(
                'Notes',
                style: Theme.of(context).appBarTheme.titleTextStyle,
              ),
            ),

            // title scale and stretch effect not working when bottom is non-null
            bottom: const PreferredSize(
              preferredSize: Size.fromHeight(50.0),
              child: MySearchBar(),
            ),
          ),
        ],
        body: ListView(
          padding: const EdgeInsets.symmetric(horizontal: padding),
          physics: const BouncingScrollPhysics(),
          children: const [
            NotesItem(),
            NotesItem(),
          ],
        ),
      ),
      // ...
    );
  }
}

class MySearchBar extends StatelessWidget {
  const MySearchBar({Key? key, this.onPressed}) : super(key: key);

  final VoidCallback? onPressed;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        height: 40.0,
        margin: const EdgeInsets.fromLTRB(padding, 0.0, padding, 8.0),
        padding: const EdgeInsets.symmetric(horizontal: padding),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30.0),
          color: darkGrey,
        ),
        child: Row(
          children: const [
            Icon(Icons.search, color: Colors.black54),
            SizedBox(width: padding),
            Text(
              'Search notes',
              style: TextStyle(color: Colors.black54, fontSize: 16.0),
            ),
          ],
        ),
      ),
    );
  }
}

And I got output.

My problem is that the bottom MySearchBar is overlapping on FlexibleSpaceBar title. And also the title scale effect on scroll down and stretch effect on scroll up not working.

How do I achieve effects like the first shown video? Thank you.