sliver_persistant_header.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(floating: true),
          SliverPersistentHeader(
            pinned: true,
            delegate: _Delegate(
              widget: PreferredSize(
                preferredSize: Size.fromHeight(50),
                child: Material(
                  child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (context, index) => Chip(
                      label: Text('Hello $index'),
                    ),
                  ),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (_, index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  color: Colors.primaries[index % Colors.primaries.length],
                  height: 100,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _Delegate extends SliverPersistentHeaderDelegate {
  final PreferredSizeWidget widget;

  _Delegate({required this.widget});
  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    return widget;
  }

  @override
  double get maxExtent => widget.preferredSize.height;

  @override
  double get minExtent => widget.preferredSize.height;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}