app_bar_parts_3.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 _SliverInfo {
  const _SliverInfo(this.constraints, this.geometry);
  final SliverConstraints constraints;
  final SliverGeometry geometry;
}

class SliverLayoutInfo {
  final Map<Object, _SliverInfo> _idToInfo = <Object, _SliverInfo>{};

  void _add(id, constraints, geometry) {
    _idToInfo[id] = _SliverInfo(constraints, geometry);
  }

  void _clear() => _idToInfo.clear();

  bool get isEmpty => _idToInfo.isEmpty;

  bool get isNotEmpty => _idToInfo.isNotEmpty;

  bool isVisible(id) => _idToInfo.containsKey(id);

  SliverConstraints constraints(id) => _idToInfo[id]!.constraints;

  SliverGeometry geometry(id) => _idToInfo[id]!.geometry;

  double scrollOffset(id) => constraints(id).scrollOffset;

  double scrollExtent(id) => geometry(id).scrollExtent;
}

typedef SliverCoordinatorCallback = void Function(ScrollNotification n, SliverLayoutInfo i);

class SliverCoordinator extends StatefulWidget {
  const SliverCoordinator({ super.key, required this.callback, required this.child });

  final Widget child;
  final SliverCoordinatorCallback callback;

  @override
  State<SliverCoordinator> createState() => _SliverCoordinatorState();

  static SliverLayoutInfo of(BuildContext context) {
    final _SliverCoordinatorScope? scope = context.dependOnInheritedWidgetOfExactType<_SliverCoordinatorScope>();
    return scope!.info;
  }
}

class _SliverCoordinatorState extends State<SliverCoordinator> {
  SliverLayoutInfo info = SliverLayoutInfo();

  bool handleScrollNotification(ScrollNotification notification) {
    // The callback runs after the descendant CustomScollView's viewport
    // has been laid out and the SliverLayoutInfo object has been updated.
    SchedulerBinding.instance.addPostFrameCallback((Duration duration) {
      widget.callback(notification, info);
      info._clear();
    });
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: handleScrollNotification,
      child: _SliverCoordinatorScope(
        info: info,
        child: widget.child,
      ),
    );
  }
}

class _SliverCoordinatorScope extends InheritedWidget {
  const _SliverCoordinatorScope({ required this.info, required super.child });

  final SliverLayoutInfo info;

  @override
  bool updateShouldNotify(_SliverCoordinatorScope oldWidget) => false;
}

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

  final Object id;

  @override
  RenderObject  createRenderObject(BuildContext context) {
    return _RenderCoordinatedSliver(
      id: id,
      info: SliverCoordinator.of(context),
    );
  }

  @override
  void updateRenderObject(BuildContext context, _RenderCoordinatedSliver renderObject) {
    renderObject.id = id;
    renderObject.info = SliverCoordinator.of(context);
  }
}

class _RenderCoordinatedSliver extends RenderProxySliver {
  _RenderCoordinatedSliver({
    required this.id,
    required this.info,
    RenderSliver? child,
  }) : super(child);

  Object id;
  SliverLayoutInfo info;

  @override
  void performLayout() {
    super.performLayout();
    info._add(id, constraints, geometry!);
  }
}

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

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

class RenderHeaderSliver extends RenderSliverSingleBoxAdapter {
  RenderHeaderSliver({ super.child });

  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 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> {
  late final ScrollController scrollController;
  double titleBarOpacity = 0;

  static const String titleBar = 'titleBar';   // Used as CoordinatedSliver ids
  static const String titleItem = 'titleItem';

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
  }

  @override
  void dispose() {
    scrollController.dispose();
    super.dispose();
  }

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

    return Scaffold(
      body: SafeArea(
        child: SliverCoordinator(
          callback: (ScrollNotification notification, SliverLayoutInfo info) {
            if (info.isVisible(titleBar) && info.isVisible(titleItem)) {
              print('${info.geometry(titleItem).paintExtent}');

              final double opacity = info.scrollOffset(titleBar) > info.scrollExtent(titleItem) ? 1 : 0;
              if (opacity != titleBarOpacity) {
                setState(() {
                  titleBarOpacity = opacity;
                });
              }
            }
          },
          child: CustomScrollView(
            controller: scrollController,
            slivers: <Widget>[
              CoordinatedSliver(
                id: titleBar,
                child: HeaderSliver(
                  child: TitleBar(
                    opacity: titleBarOpacity,
                    child: Text('Settings', style: textTheme.titleMedium),
                  ),
                ),
              ),
              SliverPadding(
                padding: horizontalPadding,
                sliver: CoordinatedSliver(
                  id: titleItem,
                  child: SliverToBoxAdapter(
                    child: Container(
                      color: Colors.yellow,
                      child: TitleItem(
                        child: Text('Settings', style: textTheme.displayLarge!.copyWith(fontSize: 72)),
                      ),
                    ),
                  ),
                ),
              ),
              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());
}