class _SettingsAppBarExampleState extends State<SettingsAppBarExample> {
  final GlobalKey headerSliverKey = GlobalKey();
  final GlobalKey titleSliverKey = GlobalKey();
  late final ScrollController scrollController;
  double headerOpacity = 0;
  double _titleHeight = 50;

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

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

  // The key must be for a widget _below_ a RenderSliver so that
  // findAncestorRenderObjectOfType can find the RenderSliver when it searches
  // the key widget's renderer ancesotrs.
  RenderSliver? keyToSliver(GlobalKey key) =>
      key.currentContext?.findAncestorRenderObjectOfType<RenderSliver>();

  // Each time the app's list scrolls: if the Title sliver has scrolled completely behind
  // the (pinned) header sliver, then change the header's opacity from 0 to 1.
  //
  // The header RenderSliver's SliverConstraints.scrollOffset is the distance
  // above the top of the viewport where the top of header sliver would appear
  // if it were laid out normally. Since it's a pinned sliver, it's unconditionally
  // painted at the top of the viewport, even though its scrollOffset constraint
  // increases as the user scrolls upwards. The "Settings" title RenderSliver's
  // scrollExtent is the vertical space it wants to occupy. It doesn't change as
  // the user scrolls.
  bool handleScrollNotification(ScrollNotification notification) {
    final RenderSliver? headerSliver = keyToSliver(headerSliverKey);
    final RenderSliver? titleSliver = keyToSliver(titleSliverKey);
    if (headerSliver != null && titleSliver != null && titleSliver.geometry != null) {
      final double opacity = headerSliver.constraints.scrollOffset > titleSliver.geometry!.scrollExtent ? 1 : 0;
      if (opacity != headerOpacity) {
        setState(() {
          headerOpacity = opacity;
        });
      }
    }
    return false;
  }

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

    return Scaffold(
      backgroundColor: colorScheme.surfaceContainer,
      body: SafeArea(
        child: NotificationListener<ScrollNotification>(
          onNotification: handleScrollNotification,
          child: CustomScrollView(
            controller: scrollController,
            slivers: <Widget>[
              PinnedHeaderSliver(
                child: Header(
                  key: headerSliverKey,
                  opacity: headerOpacity,
                  child: Text('Settings', style: textTheme.titleMedium),
                ),
              ),
              SliverPadding(
                padding: horizontalPadding,
                sliver: SliverToBoxAdapter(
                  child: SizedBox(
                    height: _titleHeight,
                    child: TitleItem(
                      child: GestureDetector(
                        onTap: () {
                          setState(() {
                            _titleHeight = Random().nextInt(200) + 50.0;
                          });
                        },
                        child: TitleItem(
                          key: titleSliverKey,
                          child: Text(
                            'Settings',
                            style: textTheme.titleLarge!.copyWith(
                              fontWeight: FontWeight.bold,
                              fontSize: 32,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              const SliverPadding(
                padding: horizontalPadding,
                sliver: ItemList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _SettingsAppBarExampleState extends State<SettingsAppBarExample> {
  final GlobalKey _titleKey = GlobalKey();
  late final ScrollController _scrollController;
  double headerOpacity = 0;
  double _dynamicTitleHeight = 50;
  double? get _titleLayoutHeight => _titleKey.currentContext?.size?.height;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()..addListener(_handleScroll);
  }

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

  void _handleScroll() {
    if (!_scrollController.hasClients || _titleLayoutHeight == null) {
      return;
    }
    final double opacity = _titleLayoutHeight! < _scrollController.offset ? 1 : 0;
    if (opacity != headerOpacity) {
      setState(() {
        headerOpacity = opacity;
      });
    }
  }

  bool _handleTitleSizeChange(SizeChangedLayoutNotification notification) {
    SchedulerBinding.instance.addPostFrameCallback((Duration timeStamp) {
      _handleScroll();
    });
    return false;
  }

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

    return Scaffold(
      backgroundColor: colorScheme.surfaceContainer,
      body: SafeArea(
        child: CustomScrollView(
          controller: _scrollController,
          slivers: <Widget>[
            PinnedHeaderSliver(
              child: Header(
                opacity: headerOpacity,
                child: Text('Settings', style: textTheme.titleMedium),
              ),
            ),
            SliverPadding(
              padding: horizontalPadding,
              sliver: SliverToBoxAdapter(
                child: NotificationListener<SizeChangedLayoutNotification>(
                  onNotification: _handleTitleSizeChange,
                  child: SizeChangedLayoutNotifier(
                    child: SizedBox(
                      height: _dynamicTitleHeight,
                      child: TitleItem(
                        key: _titleKey,
                        child: GestureDetector(
                          onTap: () {
                            setState(() {
                              _dynamicTitleHeight = Random().nextInt(200) + 50.0;
                            });
                          },
                          child: Text(
                            'Settings',
                            style: textTheme.titleLarge!.copyWith(
                              fontWeight: FontWeight.bold,
                              fontSize: 32,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            const SliverPadding(
              padding: horizontalPadding,
              sliver: ItemList(),
            ),
          ],
        ),
      ),
    );
  }
}