Flutter: Slivers

Working with large scrollable content is hard, slivers are a great way to take the work off yourself. Your Facebook wall is a good example of a feature that has content larger than the device screen. For these features, we embed views inside scrollable views. As you scroll down, the app holds snapshots of where your thumb is in relation to the interface. After some movement, the scrollable view is able to render device size content. A SliverAppBar sticks along the top of the screen and animates as the user scrolls. Above is an example of the Bart logo growing and shrinking as I scroll.

There are a bunch of ways with Flutter to make your content pretty and adaptive. One excellent way is to add a SliverAppBar because it requires so little effort. I use the SliverAppBar to show title information about the current screen. In Flutter, slivers exclusively exist inside a CustomScrollView. As the user scrolls down, the app bar closes. When the user scrolls back up, the app bar expands back into view. And even better, we do not have do more than the code you see above; there I declare a SliverAppBar with a FlexibleSpaceBar that has an image child. The final important parameter is a maximum height expansion for the bar, this is declared inside expandedHeight. After that declaration the app bar is responsible for building itself after a scroll, the app bar calculates its own tween animation. We declare a few parameters and let Flutter do the heavy lifting.

If you’re feeling crazy, you can add more feed information inside the scrollable content view. But this new view has to also be another sliver. The sliver can be a GridView or ListView that displays something. As the user scrolls along, our grid is also able to interact with the location of the interface.

In my app, the SliverFixedExtentList holds 47 transit information cells. As the user moves along the transit stations, the SliverAppBar and SliverFixedExtentList work together to provide scroll feedback and features.

Advanced scrollable content may have multiple slivers, once a sliver moves out of view it may be represented by a header view. If the user scrolls past all stories in the current month, a header is placed to bookmark the scroll location for quick action. If the user then clicks that header, the interface moves toward the selected sliver and scrolls upward.

The best tool for navigating large content screens are slivers because your views will come alive as the user scrolls. And it just feels right.