In the previous article about scrolling basics in Flutter, we covered the basics of scrolling in this framework, such as box and sliver constraints, layout, and scroll widgets. This time, we have other exciting news to share with you.
While developing applications, we found out that there’s no easy way to implement an app bar with aspects we’d like to have: multiple leading actions, collapsing actions on scroll or having an easier interface for both content and actions to modify itself on scroll.
sliver_app_bar_builder package
Therefore, we’re introducing sliver_app_bar_builder. A sliver that provides a builder for content, leading actions, and trailing actions. It also provides various parameters one can set up to achieve different results, like setting barHeight, initialBarHeight, initialContentHeight, moving content below the bar or positioning it under using contentBelowBar. But that’s just a glimpse of what the entire package can offer.
An interactive example of the sliver_app_bar_builder package [✨📱 Use landscape mode on mobile devices] (NetGlade)
You can read about the package at pub.dev/packages/sliver_app_bar_builder. Feel free to take a look at the example and listed parameters and read the getting-started chapter in the README. There is also a link to the storybook demo. Try it, play with it, and test it on the linked web page or in the demo below.
sliver_app_bar_builder on pub.dev (NetGlade)
App bars in Flutter
In applications, you can use SliverAppBar or AppBar to create a Material Design app bar for your screen. That provides everything necessary for the basic app bar that you’ll use. It has a leading widget for a back button, action widgets so you can put the settings icon in there, and some titles; all good. Underneath, it uses SliverPersistentHeader, which allows it to watch for scroll and shrink or expand based on that. It also allows it to stretch beyond its max-extent height, with some minor configuration.
While SliverPersistentHeader is an excellent sliver to use and supports a lot of functionality, it’s generally low-level, so you have to build everything using a single build method of its delegate. The build method provides additional parameters like shrinkOffset, which returns an absolute value of an offset. It takes on values from 0 to its maximum extent, which might be confusing, and it’s probably not what you want, and definitely not what I want. I only need the ratio between min and max extent, so I can use this number to animate things using lerps or tweens. Sometimes, I could also use height.
And when using SliverAppBar, you cannot multiple leading widgets or animate leading or action widgets according to the scroll. All of the aforementioned drawbacks were a great motivation for us to make this dedicated package.
Closing thoughts
Don’t get me wrong, using SliverAppBar or SliverPersistentHeader is not inadequate or inferior to our SliverAppBarBuilder sliver. It just serves a different purpose. It's on you which fits your needs more and which you’ll eventually use. We can only provide you with a new option.
If you’ll end up using it on your next project, try one of the lerp methods or Tween to respond to the expandRatio parameter of a build method and use it to change padding, transition to another theme, or make an opacity transition.
You can find some examples how you can utilize it in the package’s example.
Further readings
sliver_app_bar_builder | pub.dev
The Basics of Scrolling in Flutter | NetGlade
