Flutter: Customise your Sliver Header

Hi there! If you are already here, most probably you are looking for ways how to create custom sliver header. So let’s do that!

We are going to implement this header:

Setup

Firstly, we have to create a CustomScrollView. And then we can add a SliverPersistentHeader as a sliver.

SliverPersistentHeader has a required parameter delegate. So let’s create a class called MyHeaderDelegate that extends SliverPersistentHeaderDelegate and override its methods.

You can see a shrinkOffset parameter in the overrided build method.

The `shrinkOffset` is a distance from [maxExtent] towards [minExtent] representing the current amount by which the sliver has been shrunk.

Let’s use it to create a simple formula to get the scroll progress. We will get a double value from 0.0 to 1.0 that we will use in future calculations.

final progress = shrinkOffset / maxExtent;

Image background

To implement an image background I will use a Stack with two AnimatedOpacity widgets — one is for colored container and another one is for image.

Once we set our delegate to SliverPersistentHeader…

… we can see that we already have SliverHeader with a disappeared image.

Title

But we don’t want to have just a background. We would like to have a title that can change its style, alignment and padding.

We can use EdgeInsets.lerp(), Alignment.lerp() and TextStyle.lerp() and provide expanded value, collapsed value, and the progress.

If we add this widget to our Stack we will have a modified background with a title.

Now we can update our header with some actions. We can use the default AppBar to do this.

You can find the full example here.

Make it easy

We can make things much easies using packages. So let’s add sliver_header_delegate to the dependencies in pubspec.yaml :

sliver_header_delegate: ^0.0.3

And here what we’ll have with this package:

We can provide different widgets (or colors) for expanded and collapsed states using MutableBackground and customise our title with FlexibleTextItem.

Full example with sliver_header_delegate is here

And that’s it! Hope this article was helpful for you :)