Flutter : Collapsing Toolbar — Sliver App Bar

Diego Velasquez
Jul 10, 2018 · 3 min read

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store