Tutorials

Snippets

Search

Tags

Subscribe on Youtube

Collapsable Toolbar in Flutter using Slivers

Cover image

Expandable app bars are common in modern applications. Flutter makes this very easy to implement as well using the SliverAppBar. Let's build the UI you see below in Flutter.

Sliver App Bar animation

We'll start by supplying our MaterialApp with a theme with primary color red and an empty scaffold

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.red),
      home: Scaffold(

      ),
    );
  }
}

To use Slivers in a Scrollable view we have to use the CustomScrollView widget. This allows us to use the Slivers to create custom scroll effects. We'll set the body of your Scaffold to a CustomScrollView. We'll also make the first child a SliverAppBar. Give it an expanded height of 200, floating to false, and we want the toolbar pinned to the top.

Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(primaryColor: Colors.red),
    home: Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 200,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('FilledStacks'),
              background: Image.asset(
                '022.jpg', // <===   Add your own image to assets or use a .network image instead.
                fit: BoxFit.cover,
              ),
            ),
          ),
          
        ],
      ),
    ),
  );
}

Pinned true tells the the CustomScrollView to keep the AppBarVisible even when collapsed and not scroll it out of view. You can set it to false if you want it to scroll out of view when completely collapsed. You can also use floating to make it appear when it's out of view and you scroll down. To see the scrolling in action lets fill the rest of the space up. We have a SliverFillRemaining widget that takes single child that will take up the rest of the space in the CustomScrollView.

We'll use the SliverFillRemaining widget to add the rest of the UI so we can see it scrolling. Add this as the second sliver, in the CustomScrollView under the SliverAppBar.

 SliverFillRemaining(
  child: Column(
    children: List<int>.generate(6, (index) => index)
        .map((index) => Container(
              height: 40,
              margin: EdgeInsets.symmetric(vertical: 10),
              color: Colors.grey[300],
              alignment: Alignment.center,
              child: Text('$index item'),
            ))
        .toList(),
  ),
)

It's that simple. Now you can use this in your designs to easily create parallax / collapsing headers. Check out some of the other snippets as well.

Also check out

Cover image

A Responsive UI Architecture Solution with Provider

In this tutorial we add state management to our Responsive UI Architecture using Provider.

Link
Cover image

Building a Responsive UI Architecture in Flutter

In this tutorial I show you how to build responsive widgets for Flutter.

Link
Cover image

The Best Flutter Responsive UI Pattern

In this tutorial we go over how you can create a shared widget that provides all the sizing functionality for a responsive UI

Link