Headers may get permanently stuck when scrolling too fast

[cachapa]

When scrolling too quickly, the sticky heads can get stuck, and require scrolling back up to the stuck header to continue normal operation.

This makes this package effectively incompatible with scrollable_positioned_list since the major benefit of that package (quickly scrolling to any specific item in the list) tends to break the sticky headers.

I created a simple test app to demonstrate the problem:

Screen.Recording.2025-02-16.at.13.20.32.mov

import 'package:easy_sticky_header/easy_sticky_header.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final controller = ScrollController();

    return MaterialApp(
      home: Scaffold(
        body: Example(controller: controller),
        bottomNavigationBar: ButtonBar(
          children: [
            TextButton(
              // onPressed: () => controller.jumpTo(0),
              onPressed:
                  () => controller.animateTo(
                    0,
                    duration: Durations.short1,
                    curve: Curves.easeInOut,
                  ),
              child: Text('Scroll top'),
            ),
            TextButton(
              // onPressed: () => controller.jumpTo(10000),
              onPressed:
                  () => controller.animateTo(
                    10000,
                    duration: Durations.short1,
                    curve: Curves.easeInOut,
                  ),
              child: Text('Scroll down'),
            ),
          ],
        ),
      ),
    );
  }
}

class Example extends StatelessWidget {
  final ScrollController controller;

  const Example({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return StickyHeader(
      child: ListView.builder(
        controller: controller,
        itemCount: 1000,
        itemBuilder: (context, index) {
          if (index % 3 == 0) {
            return StickyContainerWidget(
              index: index,
              child: ListTile(
                title: Container(
                  color: Colors.grey,
                  child: Text(
                    'Header #$index',
                    style: const TextStyle(fontSize: 16),
                  ),
                ),
              ),
            );
          }
          // Custom item widget.
          return ListTile(title: Text('Item $index'));
        },
      ),
    );
  }
}