What is SliverAppBar in flutter?

SliverAppBar is a material design component widget, which must have a MaterialApp as its ancestors.

However, the name suggests that it is a kind of AppBar.

Then what it is exactly? And how do we use a SliverAppBar?

Here, the word sliver is important, because it defines a scrollable area in the AppBar, which has the ability to collapse.

As a result, we can conclude that SliverAppBar is a kind of AppBar that can change with body of our flutter app.

To make it more clear, we can add that this particular AppBar can change its appearance, if we scroll up it can shrink and gets smaller in size, even it can disappear. And, on the contrary, it can also gets to its normal size by blending with the body, as we scroll down again.

As a result, we can use an image as its background. Since it occupies the upper part, when we scroll up or down, it plays the role of a navigation bar in iOS and acts as a toolbar in Android app.

Let’s see two images one after the other, so that we can have a more clear picture of what is SliverAppBar and how it works.

Now, if we scroll up to see the bottom part, the image disappears and the text only remains. The SliverAppBar collapses.

To make it simple, we will take a look at the full code where we’ll show how SliverAppBar integrates with a CustomScrollView.

import 'package:flutter/material.dart';

class SliverAppBarExample extends StatelessWidget {
  const SliverAppBarExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliver AppBar Example',
      home: SliverAppBarHome(),
    );
  }
}

class SliverAppBarHome extends StatelessWidget {
  const SliverAppBarHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text(
                'It will collapse',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                ),
              ),
              background: Image.network(
                'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50,
            delegate: SliverChildListDelegate([
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
            ]),
          ),
        ],
      ),
    );
  }
}

The Custom scroll view has the slivers parameter that returns a list of widgets.

CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
...

As a result we have added a sliver fixed extent list widget and used a combination of colors.

In our next tutorial we’ll show how we this special collapsible AppBar can act as a toolbar or any other widgets, such as a TabBar and a FlexibleSpaceBar.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter