Flutter: SliverAppBar with Stretchy Header

Diego Velasquez
Apr 22, 2020 · 3 min read

Wooo after a long time that I didn’t write, this was because I was busy at work, making videos on the YouTube channel (The Dart Side), helping on StackOverflow (Spanish version)and adding new examples to my flutter samples repo.

Have you ever seen widgets with headers that can be stretched when scrolling? this is called the Stretchy widget.

stretchy_header package

A long time ago I made a package that helped to solve that problem, this one is called stretchy_header, it allows placing a widget which can be expanded with blur(optional) when scrolling, I also added a trigger that works similar to the RefreshIndicator widget.

But guess what ?, now Flutter already incorporates its own stretchy header inside the SliverAppBar, I’m going to show you how it works.

All we have to do is assign true to the stretch property which now brings the SliverAppBar and in flexibleSpace we use the FlexibleSpaceBar widget, which now also brings a new property called stretchModes which indicates the effects it will add when we scroll.

The modes are:

  • StretchMode.zoomBackground -> The background widget will expand to fill the extra space.
  • StretchMode.blurBackground -> The background will blur using a [ImageFilter.blur] effect.
  • StretchMode.fadeTitle -> The title will fade away as the user over-scrolls.

Here the example using StretchMode.zoomBackground

Using StretchMode.zoomBackground and StretchMode.blurBackground,

Finally using all 3 modes at the same time.

Another interesting thing that it brings is that we can launch an action when we scroll our widget. The property we will use will be onStretchTrigger, where we can execute any action.

By default the trigger is called when the scroll exceeds 100.0 pixels but we can override that using the new stretchTriggerOffset property.

Playing around with this widget I was able to replicate a design that I found on the web, this is the result:

Conclusion

I hope it has helped you in case you want to add this widget in your project. As you can see the Flutter team is working hard implementing a large number of useful widgets but that many of us don’t know, you can review the last example in my repository

You can follow me on Twitter

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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