Place a floating app bar above a list
To make it easier for users to view a list of items, you might want to hide the app bar as the user scrolls down the list. This is especially true if your app displays a “tall” app bar that occupies a lot of vertical space.
Typically, you create an app bar by providing an
appBar property to the
Scaffold widget. This creates a fixed app bar that always remains above the
body of the
This recipe demonstrates how to use a
CustomScrollView to display a list of items with an app bar on top that scrolls offscreen as the user scrolls down the list using the following steps:
SliverAppBarto add a floating app bar.
Add a list of items using a
1. Create a
To create a floating app bar, place the app bar inside a
CustomScrollView that also contains the list of items. This synchronizes the scroll position of the app bar and the list of items. You might think of the
CustomScrollView widget as a
ListView that allows you to mix and match different types of scrollable lists and widgets together.
The scrollable lists and widgets provided to the
CustomScrollView are known as slivers. There are several types of slivers, such as
SliverAppBar. In fact, the
GridView widgets use the
SliverGrid widgets to implement scrolling.
For this example, create a
CustomScrollView that contains a
SliverAppBar and a
SliverList. In addition, remove any app bars that you provide to the
Scaffold( // No appBar property provided, only the body. body: CustomScrollView( // Add the app bar and list of items as slivers in the next steps. slivers: <Widget> ), );
SliverAppBar to add a floating app bar
SliverAppBar also gives you the ability to create a “floating” app bar that scrolls offscreen as the user scrolls down the list. Furthermore, you can configure the
SliverAppBar to shrink and expand as the user scrolls.
To create this effect:
- Start with an app bar that displays only a title.
true. This allows users to quickly reveal the app bar when they scroll up the list.
flexibleSpacewidget that fills the available
CustomScrollView( slivers: <Widget>[ SliverAppBar( title: Text('Floating app bar'), // Allows the user to reveal the app bar if they begin scrolling back // up the list of items. floating: true, // Display a placeholder widget to visualize the shrinking size. flexibleSpace: Placeholder(), // Make the initial height of the SliverAppBar larger than normal. expandedHeight: 200, ), ], );
3. Add a list of items using a
Now that you have the app bar in place, add a list of items to the
CustomScrollView. You have two options: a
SliverList or a
SliverGrid. If you need to display a list of items one after the other, use the
SliverList widget. If you need to display a grid list, use the
SliverGrid widgets take one required parameter: a
SliverChildDelegate, which provides a list of widgets to
SliverGrid. For example, the
SliverChildBuilderDelegate allows you to create a list of items that are built lazily as you scroll, just like the
// Create a SliverList. SliverList( // Use a delegate to build items as they're scrolled on screen. delegate: SliverChildBuilderDelegate( // The builder function returns a ListTile with a title that // displays the index of the current item. (context, index) => ListTile(title: Text('Item #$index')), // Builds 1000 ListTiles childCount: 1000, ), )