Let’s begin by clarifying what I mean by this, here is one way in which we may want to hide our app bar as our user scrolls:

This looks really nice when compared to pinned app bars, it can be achieved with the following code:

body: new CustomScrollView(slivers: <Widget>[
const SliverAppBar(
    title: const Text('Sliver App Bar'),
  ),
new SliverList(
      delegate: new SliverChildListDelegate(buildTextViews(50)))
])

List buildTextViews(int count) {
  List<Widget> strings = List();
for (int i = 0; i < count; i++) {
    strings.add(new Padding(padding: new EdgeInsets.all(16.0),
        child: new Text("Item number " + i.toString(),
            style: new TextStyle(fontSize: 20.0))));
  }
return strings;
}

Now, let’s break this down a bit. Our parent widget in our body is the CustomScrollView widget — this widget takes a collection of sliver widgets to display, allowing them to make use of scrolling animations that it provides. Whilst the ListView widget (which you may have used before) provides us a way to display a scrollable collection, it doesn’t provide these kind of animations for us.

You can see from above that we just provide a collection of widgets which we wish to be scrolled through, in this case this is a SliverAppBar and SliverList. The SliverAppBar in this case is just used to display some text — it can be used for much more (maybe it will include a TabBar or a FlexibleSpacebar to create a collapsing style AppBar) but for this post we’re just going to cover a simple case as illustrated above.

This SliverAppBar is a special kinda of AppBar designed to be used with the CustomScrollView widget. It should always be the first child of the slivers argument, this is because the scroll offset may be used to vary its height or it may be used to float on top of the child contents which are listed beneath it.

Next comes the SliverList widget — this is a list of content designed to be used with the CustomScrollView widget. This Widget allows you to provide a collection of items (widgets) to be displayed — the use of these two widgets together allows us to achieve the scrolling effects that we say above.

Note: The SliverFixedExtentList widget is available for greater efficiency if your items have a fixed extent.

Now, by default with the code from above we see something like this:

This looks pretty nice as it is, the appbar hides out of view as we scroll and comes back as if it is positioned at the top of of list. So our items are being hidden and revealed in a linear fashion.

Now, we may want to have our SliverAppBar fixed, which we can do by adding the pinned argument to its constructor:

const SliverAppBar(
    title: const Text('Sliver App Bar'),
    pinned: true
)

This will give us the following result:

Here our content just scrolls underneath the appbar. However, going back to the first example, we can hide our appbar as we scroll but instead bring it back into view as soon as we start scrolling by adding the floating argument:

const SliverAppBar(
    title: const Text('Sliver App Bar'),
    floating: true
)

This gives a floating effect to the appbar and looks like so:

Now, the floating appbar is revealed as we scroll, but it only continues to reveal if we continue scrolling. In some case, we may want to snap it into view regardless of whether the user continues scrolling. For this, we can use the snap argument alongside floating:

const SliverAppBar(
    title: const Text('Sliver App Bar'),
    floating: true,
snap: true
)

By default this is always set to false, but snap gives us the effect of the appbar snapping into view if the user stops scrolling before the appbar is completely visible:

Slivers can add a nice touch to your applications, resulting in a more pleasant experience for your users. Soon, we’ll look at how we can make use of TabBars and collapsing appbars too! For now though, I’d love to see them used slivers in your projects, and if you have any questions on their use then I’d love to help out!

Tweets by hitherejoe