How to make this sliver in flutter?

Question

How to make this sliver flutter? I want to do the same thing as in the following video

enter image description here

Answer 1

You can do like this.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: Text("App bar"),
          ),
          SliverPersistentHeader(
            delegate: DelegateHeader(),
            pinned: true,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index){
              return ListTile(
                title: Text("new item $index"),
              );
            },
              childCount: 50
            )
          )
        ],
      ),
    );
  }

and

class DelegateHeader extends SliverPersistentHeaderDelegate {

  @override
  double get maxExtent => 100;

  @override
  double get minExtent => 100;

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

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.black26,
      child: Center(child: Text("Always here")),
    );
  }
}