Simple and efficient sticky headers

sticky_headers.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Body(),
    );
  }
}

/// {@template main}
/// Body widget.
/// {@endtemplate}
class Body extends StatelessWidget {
  /// {@macro main}
  const Body({
    super.key, // ignore: unused_element
  });

  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Theme.of(context).colorScheme.surface,
        body: CustomScrollView(
          slivers: [
            for (final section in listSections)
              SliverMainAxisGroup(
                key: ValueKey(section),
                slivers: [
                  SliverAppBar(
                    title: Text(section.title),
                    pinned: true,
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        final item = section.items[index];
                        return ListTile(
                          title: Text(item.title),
                          subtitle: Text(item.description),
                        );
                      },
                      childCount: section.items.length,
                    ),
                  ),
                ],
              ),
            for (final section in gridSections)
              SliverMainAxisGroup(
                key: ValueKey(section),
                slivers: [
                  SliverAppBar(
                    title: Text(section.title),
                    pinned: true,
                  ),
                  SliverGrid(
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                      childAspectRatio: 5
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (context, index) {
                        final item = section.items[index];
                        return ListTile(
                          title: Text(item.title),
                          subtitle: Text(item.description),
                        );
                      },
                      childCount: section.items.length,
                    ),
                  ),
                ],
              ),
          ],
        ),
      );
}

final listSections = List<Section>.generate(
  10,
  (index) => Section(
    title: 'Section $index',
    items: List<SectionItem>.generate(
      5,
      (index) => SectionItem(
        title: 'Item $index',
        description: 'Description $index',
      ),
    ),
  ),
);

final gridSections = List<Section>.generate(
  10,
  (index) => Section(
    title: 'Section $index',
    items: List<SectionItem>.generate(
      5,
      (index) => SectionItem(
        title: 'Item $index',
        description: 'Description $index',
      ),
    ),
  ),
);

class Section {
  const Section({required this.title, required this.items});

  final String title;
  final List<SectionItem> items;
}

class SectionItem {
  const SectionItem({required this.title, required this.description});

  final String title;
  final String description;
}