How do I make my collapsing toolbar flutter?

We’ve already learned in our previous article on SliverAppBar that SliverAppBar is a material design component widget, which must have a MaterialApp as its ancestors.

However, to make a collapsing toolbar in Flutter, we need to use SliverAppBar along with a NestedScrollView.

Why do we need to do that?

Because we want our outer and inner sliver should work in one single scroll view, such as a CustomScrollView.

With reference to the above statement we must also know what does sliver mean in Flutter.

Let’s try to understand that concept first. Suppose we have a scrollable area where a portion must behave in a special way. In that case, sliver is that portion.

The name SliverAppBar comes from that concept. To make an AppBar behave in a special way, flutter has invented SliverAppBar that acts as a collapsing toolbar.

As a result, our special AppBar becomes scrollable also. As we scroll up it collapses and blends with the inner scrollable body.

However, to make that happen, the headerSliverBuilder of a NestedScrollView may require special configuration. So that the outer and the inner act as one single scroll view.

To get an idea, let us see the first screenshot of our flutter app.

We’ve used SliverAppBar in the outer scroll view.

Moreover, we have made the pinned parameter of SliverAppBar true.

Why did we do that?

Because a pinned SliverAppBar works in a NestedScrollView exactly as it would in another scroll view, like CustomScrollView.

Although the SliverAppBar remains at the outer, but it never disappears when we scroll up the inner portion.

The SliverAppBar.pinned, the Boolean parameter of SliverAppBar can still expand and contract as the user scrolls. Subsequently it works as a collapsing toolbar in flutter.

In addition, it will remain visible and behaves in a special manner when user scrolls up and down. It has never scrolled out of view.

The SliverAppBar always remains in the visible portion of the viewport.

Certainly, it would not be possible, if we had not configured headerSliverBuilder of a NestedScrollView.

Consequently, we must discuss NestedScrollView in the next article, and that we’ll certainly do. So stay tuned.

And, finally, let’s see how we’ve configured headerSliverBuilder of a NestedScrollView in our code.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliver and Nested Scroll',
      home: NestedSliverHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Container(
                  color: Colors.blue,
                  child: Text(
                    "The Toolbar Collapses",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 25.0,
                    ),
                  ),
                ),
                background: Image.network(
                  'https://cdn.pixabay.com/photo/2016/09/10/17/18/book-1659717_960_720.jpg',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },
        body: ListView(
          children: [
            Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
              width: 250,
              height: 250,
              color: Colors.red,
            ),
            Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
              width: 250,
              height: 250,
              color: Colors.yellow,
            ),
            Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
              width: 250,
              height: 250,
              color: Colors.green,
            ),
            Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
              width: 250,
              height: 250,
              color: Colors.pink,
            ),
            Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
              width: 250,
              height: 250,
              color: Colors.amber,
            ),
            Container(
              margin: const EdgeInsets.all(5),
              padding: const EdgeInsets.all(5),
              width: 250,
              height: 250,
              color: Colors.teal,
            ),
          ],
        ),
      ),
    );
  }
}

This special configuration works naturally in a NestedScrollView, as the pinned SliverAppBar always remains in the visible portion of the viewport.

It perfectly acts as a collapsing toolbar in Flutter.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter