Flutter : Collapsing Toolbar — Sliver App Bar

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

Final Result

Conclusion

Many times we encounter some problems that we think we can’t do in Flutter, but all we have to do is read the documentation step by step.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

References

https://docs.flutter.io/flutter/material/SliverAppBar-class.html
https://docs.flutter.io/flutter/material/FlexibleSpaceBar-class.html
https://docs.flutter.io/flutter/widgets/SliverPersistentHeaderDelegate-class.html