test_overlaps_content.dart

import 'package:flutter/material.dart';

class TitleBar extends SliverPersistentHeaderDelegate {
  const TitleBar(this.height, this.topPadding);

  final double height;
  final double topPadding;

  @override
  double get minExtent => height + topPadding;

  @override
  double get maxExtent => height + topPadding;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: overlapsContent ? Colors.orange : null,
      padding: EdgeInsets.only(top: topPadding),
      alignment: Alignment.center,
      child: const Text('Settings', style: TextStyle(fontSize: 18)),
    );
  }

  @override
  bool shouldRebuild(TitleBar oldDelegate) {
    return height != oldDelegate.height || topPadding != oldDelegate.topPadding;
  }
}

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

  static const int itemCount = 50;
  static const Color startColor = Colors.blue;
  static const Color endColor = Colors.red;

  @override
  Widget build(BuildContext context) {
    final double topPadding = MediaQuery.paddingOf(context).top;

    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverPersistentHeader(
            pinned: true,
            delegate: TitleBar(56, topPadding),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Card(
                  color: Color.lerp(startColor, endColor, index / itemCount)!,
                  child: ListTile(
                    textColor: Colors.white,
                    title: Text('Page $index'),
                  )
                );
              },
              childCount: itemCount,
            ),
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const TestOverlapsContent(),
    );
  }
}

void main() {
  runApp(const TestOverlapsContentApp());
}