import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
import 'package:sliver_tools/sliver_tools.dart';

void main() => runApp(const MyApp());

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _showHeaderBody = false;

  final _duration = Duration(milliseconds: 200);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter Sticky Header Issue")),
        body: CustomScrollView(
          slivers: [
            MultiSliver(
              pushPinnedChildren: true,
              children: [
                Builder(
                  builder: (ctx) => SliverStickyHeader(
                    header: _buildHeader(ctx, 'Header', _showHeaderBody,
                        callback: (showHeader) =>
                            setState(() => _showHeaderBody = showHeader)),
                    sliver: SliverToBoxAdapter(
                      child: _buildBody(_showHeaderBody),
                    ),
                  ),
                ),
                Builder(
                  builder: (ctx) => SliverStickyHeader(
                    header: _buildHeader(ctx, 'Header 2', true),
                    sliver: SliverToBoxAdapter(child: _buildBody(true)),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _showHeaderOnScreen(BuildContext ctx) async {
    await Future.delayed(_duration);
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Scrollable.ensureVisible(ctx, duration: _duration);
    });
  }

  Widget _buildHeader(
    BuildContext ctx,
    String header,
    bool showHeader, {
    void Function(bool)? callback,
  }) {
    return ListTile(
      title: Text(header),
      onTap: () async {
        final expand = !showHeader;
        if (expand) await _showHeaderOnScreen(ctx);
        callback?.call(expand);
      },
    );
  }

  Widget _buildBody(bool expanded) {
    return AnimatedCrossFade(
      firstChild: Container(height: 0.0),
      secondChild: Column(
        children: List.generate(50, (index) => Text(index.toString())),
      ),
      crossFadeState:
          expanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
      duration: _duration,
    );
  }
}