Slivers in Flutter (SliverAppBar)

Hello Medium readers, Today we are implementing Slivers in flutter.
In Flutter, a “sliver” refers to a portion of a scrollable area. It’s a term used to describe a flexible portion of a scrollable space, and it’s particularly relevant when working with widgets that support a sliver-based architecture, such as CustomScrollView.

1. SliverAppBar: A common use case for slivers is the SliverAppBar. This is an app bar that integrates with CustomScrollView and can expand, contract, and stay pinned at the top as you scroll. It's an excellent way to create a flexible app bar that responds to user interactions.

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Your Title Here'),
        background: Image.network('https://example.com/your-image.jpg'),
      ),
    ),
    // Other slivers go here
  ],
)

The SliverAppBar shares similar properties with the existing AppBar.

body: CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Horizons'),
      backgroundColor: Colors.teal[800],
    ),
    WeeklyForecastList(),
  ],
),

We now have a scrolling app bar. This app bar scrolls as if it were part of our list. The SliverAppBar has a lot more dynamic features though, so let’s explore pinned, floating, snap, and collapsing behaviors for the new SliverAppBar.

Pinning the app bar keeps it at the top of the screen, like the AppBar we had before.

SliverAppBar(
  title: Text('Horizons'),
  backgroundColor: Colors.teal[800],
  pinned: true,
),

A floating SliverAppBar will scroll out of view, but it scrolls back into view when the user scrolls back in that direction, regardless of the current position in the scroll view.

SliverAppBar(
  title: Text('Horizons'),
  backgroundColor: Colors.teal[800],
  floating: true,
),

Floating app bars also support snap animation. This animation snaps the SliverAppBar in and out of view as the user scrolls, rather than floating in with the user input.

SliverAppBar(
  title: Text('Horizons'),
  backgroundColor: Colors.teal[800],
  floating: true,
  snap: true,
),

Last, let’s see how the SliverAppBar behaves when we use an expandedHeight. This adds to the size of the app bar and collapses as the user scrolls. The expandedHeight can be combined with the floating, pinned, and snap features that were discussed earlier.

SliverAppBar(
  title: Text('Horizons'),
  backgroundColor: Colors.teal[800],
  pinned: true,
  expandedHeight: 200.0,
),

Flexible space in a SliverAppBar

We can fill the expandedHeight of our app bar, for an even more dynamic UI.

We can do this with the FlexibleSpaceBar. This widget is designed to stretch and collapse its content. Let’s try it out!

Add a FlexibleSpaceBar to your SliverAppBar. You can move the title here and add an image as the background.

SliverAppBar(
  pinned: true,
  backgroundColor: Colors.teal[800],
  expandedHeight: 200.0,
  flexibleSpace: FlexibleSpaceBar(
    title: Text('Horizons'),
    background: Image.network(
      headerImage,
      fit: BoxFit.cover,
    ),
  ),
),

Now, as the user scrolls, the app bar collapses with a parallax effect on the image and fades into the pinned SliverAppBar after it’s fully collapsed. The FlexibleSpaceBar supports multiple CollapseModes, with this parallax behavior being the default. You can also try out pin and none to see how the effect can vary.

FlexibleSpaceBar(
  title: Text('Horizons'),
  collapseMode: CollapseMode.pin,
  // ... 
),

For better contrast, let’s add another gradient effect behind the title. We can do this as we did before, but let’s use a LinearGradient instead.

Wrap your Image in aDecoratedBox, with the LinearGradient in the DecorationPosition.foregound.

FlexibleSpaceBar(
  title: Text('Horizons'),
  background: DecoratedBox(
    position: DecorationPosition.foreground,
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.bottomCenter,
        end: Alignment.center,
        colors: <Color>[
          Colors.teal[800]!,
          Colors.transparent,
        ],
      ),
    ),
    child: Image.network(
      headerImage,
      fit: BoxFit.cover,
    ),
  ),
),

Just as the FlexibleSpaceBar supports collapsing our expanded SliverAppBar, it also works hand-in-hand with another SliverAppBar feature - stretch. Let's see how stretching can add a nice finishing touch to our app, as well as some extra functionality.

Stretching the FlexibleSpace

In order to stretch our SliverAppBar, we must be using BouncingScrollPhysics. This is part of the ConstantScrollBehavior we had set up in the very beginning of this workshop. BouncingScrollPhysics allows us to overscroll, revealing empty space at the end of a scrollable area.

With SliverAppBar, we can stretch to fill this empty space, creating a cool visual, while also providing a callback. This feature is often used to reload data - the weather is constantly changing after all - so let's see how we can use this to refresh our forecast.

First we’ll want to set SliverAppBar.stretch to true. We can provide a callback to onStretchTrigger, this will be called when the user overscrolls far enough - with far enough being 100 pixels by default. You can customize this further with stretchTriggerOffset. This callback is where we can refresh our data or complete another operation.

SliverAppBar(
  pinned: true,
  stretch: true,
  onStretchTrigger: () async {
    print('Load new data!');
    // await Server.requestNewData();
  }
  //...

Now we can pull down from the top edge of our scroll view and see the FlexibleSpaceBar stretch into the overscroll space, and if we check the console, we can see our print statement from our callback.

The FlexibleSpaceBar can add a few finishing touches here too. By default, the FlexibleSpaceBar has a StretchMode that will transform the background to fill the overscrolled space. There are other StretchModes though, and you can combine them for neat effects - you can have the title's Opacity fade as the SliverAppBar stretches, and apply a blur to the background as well.

Feel free to try these out and see what you like best as you stretch.

FlexibleSpaceBar(
  stretchModes: <StretchMode>[
    StretchMode.zoomBackground,
    StretchMode.fadeTitle,
    StretchMode.blurBackground,
  ],
  // ...

Properties of SliverAppBar

The following are the basic properties of the SliverAppBar:

• > actions: This property is utilized to make widgets right of the appBar title. For the most part, it is an iconButton that speaks to regular operations.
• > title: This property is utilized to characterize the title to the SliverAppBar. It is like the AppBar title to give the name of the application.
• > leading: This property is utilized to characterize a widget left to the title. For the most part, it is utilized to put the Menu Drawer widget.
• > backgroundColor: This property is utilized to characterize a background color to the sliver app bar.
• > bottom: This property is utilized to make space for the lower part of the title, where we can characterize any widget as indicated by our necessities.
• > expandedHeight: This property is utilized to determine the most extreme height of the application bar that can be extended while scrolling. It must be characterized in a double value.
• > floating: This property decides if the application bar will be noticeable or not when the user scrolls towards the application bar.
• > flexibleSpace: This property is utilized to characterize a widget which is stacked behind the toolbar and the tab bar. Its height is equivalent to the application bar’s general height.

Conclusion:

In the article, I have explained properties and AppBar Slivers in a flutter.

I hope this blog will provide you with sufficient information in Trying up Slivers in your flutter projects.

❤ ❤ Thanks for reading this article ❤❤