Flutter: SliverToBoxAdapter overlap on SliverAppBar

Question

I'm currently attempting to create an overlap effect between SliverAppBar & SliverToBoxAdapter in my Flutter application. Specifically, I want to display a red Container() that overlaps both the SliverAppBar & SliverToBoxAdapter. The challenge I'm facing is making this overlapping container display correctly & scrollable with the entire list. I've provided the code below for reference.

I've explored solutions involving NestedScrollView & CustomScrollView. Additionally, I've come across a package called "sliver_tools" and attempted to use SliverStack for this purpose. However, the behavior of SliverAppBar became strange in that scenario.

I'm reaching out to seek assistance and explore any workable solutions. Thank you for taking the time to look into this matter. Check it on DartPad

import 'package: flutter/material.dart';

class Custom extends StatelessWidget {
  const Custom({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      clipBehavior: Clip.none,
      slivers: [
        SliverAppBar(
          pinned: true,
          stretch: true,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            background: Container(color: Colors.blue),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            color: Colors.yellow,
            height: 1000.0,
            child: Column(
              children: [
                Container(
                  transform: Matrix4.translationValues(0, -50.0, 0),
                  height: 100,
                  width: 100,
                  color: Colors.red,
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}