app_bar_parts_2.dart

import 'dart:math' as math;

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/scheduler.dart';

// The pinned item at the top of the list. This is an implicitly
// animated widget: when the opacity changes the title and divider
// fade in or out.
class TitleBar extends StatelessWidget {
  const TitleBar({ super.key, required this.opacity, required this.child });

  final double opacity;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;

    return AnimatedContainer(
      duration: const Duration(milliseconds: 1000),
      padding: const EdgeInsets.symmetric(vertical: 12),
      decoration: ShapeDecoration(
        color: colorScheme.background,
        shape: LinearBorder.bottom(
          side: BorderSide(
            color: opacity == 0 ? colorScheme.background : colorScheme.outline,
          ),
        ),
      ),
      alignment: Alignment.center,
      child: AnimatedOpacity(
        opacity: opacity,
        duration: const Duration(milliseconds: 1000),
        child: child,
      ),
    );
  }
}

// The second item in the list. It scrolls normally. When it has scrolled
// out of view behind the first, pinned, TitleBar item, the TitleBar fades in.
class TitleItem extends StatelessWidget {
  const TitleItem({ super.key, required this.child });

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: AlignmentDirectional.bottomStart,
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: child,
    );
  }
}

// A placeholder list of 50 items. They'll appear after the TitleItem.
class ItemList extends StatelessWidget {
  const ItemList({
    super.key,
    required this.startColor,
    required this.endColor,
    this.itemCount = 50,
  });

  final Color startColor;
  final Color endColor;
  final int itemCount;

  @override
  Widget build(BuildContext context) {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Card(
            color: Color.lerp(startColor, endColor, index / itemCount)!,
            child: ListTile(
              textColor: Colors.white,
              title: Text('Item $index'),
            ),
          );
        },
        childCount: itemCount,
      ),
    );
  }
}

class HeaderSliver extends SingleChildRenderObjectWidget {
  const HeaderSliver({
    super.key,
    required this.onOverlapChanged,
    super.child,
  });

  final ValueChanged<bool> onOverlapChanged;

  @override
  RenderHeaderSliver createRenderObject(BuildContext context) {
    return RenderHeaderSliver(
      onOverlapChanged: onOverlapChanged,
    );
  }

  @override
  void updateRenderObject(BuildContext context, RenderHeaderSliver renderObject) {
    renderObject.onOverlapChanged = onOverlapChanged;
  }
}

class RenderHeaderSliver extends RenderSliverSingleBoxAdapter {
  RenderHeaderSliver({ super.child, required this.onOverlapChanged });

  bool? overlap;
  ValueChanged<bool> onOverlapChanged;

  double get childExtent {
    if (child == null) {
      return 0.0;
    }
    assert(child!.hasSize);
    return switch (constraints.axis) {
      Axis.vertical => child!.size.height,
      Axis.horizontal => child!.size.width,
    };
  }

  @override
  double childMainAxisPosition(covariant RenderObject child) => 0;

  @override
  void performLayout() {
    final SliverConstraints constraints = this.constraints;
    child?.layout(constraints.asBoxConstraints(), parentUsesSize: true);

    final bool overlapValue = constraints.scrollOffset > childExtent;
    if (overlapValue != overlap) {
      overlap = overlapValue;
      SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
        onOverlapChanged(overlap!);
      });
    }

    final double layoutExtent = clampDouble(childExtent - constraints.scrollOffset, 0, constraints.remainingPaintExtent);
    final double paintExtent = math.min(childExtent, constraints.remainingPaintExtent - constraints.overlap);
    geometry = SliverGeometry(
      scrollExtent: childExtent,
      paintOrigin: constraints.overlap,
      paintExtent: paintExtent,
      layoutExtent: layoutExtent,
      maxPaintExtent: childExtent,
      maxScrollObstructionExtent: childExtent,
      cacheExtent: calculateCacheOffset(constraints, from: 0.0, to: childExtent),
      hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.
    );
  }
}

class AppBarParts extends StatefulWidget {
  const AppBarParts({ super.key });

  @override
  State<AppBarParts> createState() => _AppBarPartsState();
}

class _AppBarPartsState extends State<AppBarParts> {
  double titleBarOpacity = 0;

  @override
  Widget build(BuildContext context) {
    const EdgeInsets horizontalPadding = EdgeInsets.symmetric(horizontal: 8);
    final TextTheme textTheme = Theme.of(context).textTheme;

    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: <Widget>[
            // The TitleBar item is not padded because it's divider must span
            // the entire CustomScrollView.
            HeaderSliver(
              onOverlapChanged: (bool overlap) {
                setState(() {
                  titleBarOpacity = overlap ? 1 : 0;
                });
              },
              child: TitleBar(
                opacity: titleBarOpacity,
                child: Text('Settings', style: textTheme.titleMedium),
              ),
            ),
            SliverPadding(
              padding: horizontalPadding,
              sliver: SliverToBoxAdapter(
                child: TitleItem(
                  child: Text('Settings', style: textTheme.headlineLarge),
                ),
              ),
            ),
            const SliverPadding(
              padding: horizontalPadding,
              sliver: ItemList(
                startColor: Colors.blue,
                endColor: Colors.red,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

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

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