Flutter : Collapsing Toolbar — Sliver App Bar

3 min readJul 10, 2018

The Collapsing Toolbar is UI component widely used in our applications today. It consists of displaying an image or background in the upper part of the screen, occupying a fixed space, so that later, by scrolling upwards, the content changes and becomes a navigation bar in iOS or toolbar in the case of Android.
Here I show you a visual example of how an interface looks using Collapsing Toolbar

In Android the CollapsingToolbar UI component is available within the design-support library, while in iOS there is no official UI component, but there are libraries that help us to do the same.

In order to do the same in Flutter, we need to use the Widget called SliverAppBar together with FlexibleSpaceBar as a child.

I’m going to show you a simple example

Result

So far everything is fine, behaves as we want, with just a few lines of code :), however, I had a problem when using SliverAppBar along with TabBars.

I will add 2 tabs and we will see what happens.

This is the code

Result

As we can see, the UI looks very bad, due to the fact the title does not reach the top bar, so it is crossed with the Tabs.

We are going to try to improve this design, for this I am going to remove the Tabs from the SliverAppBar and I will put them in another Sliver, the code would be as follows

Result

It’s better, right? but we have a problem, at the time of scrolling up, the Tabs are not fixed and disappears, this is not what we are looking for, so to solve this, we must use the SliverPersistentHeader and create a delegate subclass of SliverPersistentHeaderDelegate, as follows