How to create custom slivers in flutter?

Question

I want to create a custom container under the sliver appbar like the right screen in the image

https://cdn.dribbble.com/users/1720296/screenshots/6918712/dribbble_blog_2x.jpg

Answer 1

You can use custom header with SliverPersistentHeaderDelegate ,

This is your custom SliverPersistentHeaderDelegate

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {

  @override
  double get minExtent => 100;
  @override
  double get maxExtent => 300;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      ...
    );
  }

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

And use it like this

SliverPersistentHeader(
  delegate: _SliverAppBarDelegate(
    ...
  ),
  pinned: true,
),