Joined sliver scrolling - by Simon Lightfoot :: #HumpdayQandA on 30th April 2025 :: https://www.youtube.com/watch?v=1U-zd6MYrOA

humpday_2025-04-30_1.dart

// MIT License
//
// Copyright (c) 2025 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.blueAccent,
          dynamicSchemeVariant: DynamicSchemeVariant.vibrant,
        ),
        useMaterial3: false,
      ),
      home: Home(),
    );
  }
}

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  var _items = <String>[];

  @override
  void initState() {
    super.initState();
    loadContent(0);
  }

  void _onPageChanged(int page) {
    loadContent(page);
  }

  Future<void> loadContent(int page) async {
    final items = List.generate(100, (int index) {
      return 'Page $page Item $index';
    });
    if (mounted) {
      setState(() {
        _items = items;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: CustomScrollView(
        slivers: [
          SliverMyAppHeader(
            onPageChanged: _onPageChanged,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              childCount: _items.length,
              (BuildContext context, int index) {
                return ListTile(
                  title: Text(
                    _items[index],
                    style: TextStyle(fontSize: 28.0),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class SliverMyAppHeader extends StatefulWidget {
  const SliverMyAppHeader({
    super.key,
    required this.onPageChanged,
  });

  final ValueChanged<int> onPageChanged;

  @override
  State<SliverMyAppHeader> createState() => _SliverMyAppHeaderState();
}

class _SliverMyAppHeaderState extends State<SliverMyAppHeader> {
  final _pageController = PageController();
  int _lastPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(_onPageChanged);
  }

  void _onPageChanged() {
    final newPage = (_pageController.page ?? 0).round();
    if (_lastPage != newPage) {
      _lastPage = newPage;
      widget.onPageChanged(newPage);
    }
  }

  @override
  void dispose() {
    _pageController.removeListener(_onPageChanged);
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
      delegate: HeaderDelegate(
        controller: _pageController,
      ),
      //pinned: true,
      floating: true,
    );
  }
}

class HeaderDelegate extends SliverPersistentHeaderDelegate {
  const HeaderDelegate({required this.controller});

  final PageController controller;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Material(
      color: Theme.of(context).appBarTheme.backgroundColor,
      child: PageView(
        controller: controller,
        children: [
          Card(
            margin: EdgeInsets.all(12.0),
            child: Placeholder(color: Colors.red),
          ),
          Card(
            margin: EdgeInsets.all(12.0),
            child: Placeholder(color: Colors.green),
          ),
          Card(
            margin: EdgeInsets.all(12.0),
            child: Placeholder(color: Colors.blue),
          )
        ],
      ),
    );
  }

  @override
  double get minExtent => 300.0;

  @override
  double get maxExtent => 300.0;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => false;
}