Flutter 3.41 is live! Check out theFlutter 3.41 blog post!
Place a floating app bar above a list
How to place a floating app bar or navigation bar above a list.
This guide describes how to place a floating app bar or navigation bar above a list in a Flutter app.
Overview
#To make it easier for users to view a list of items, you might want to minimize the app bar (navigation bar), as the user scrolls down the list.
Moving the app bar into aCustomScrollView allows you to create an app bar that can be minimized or scroll offscreen as you scroll through a list of items contained inside theCustomScrollView.
This recipe demonstrates how to use aCustomScrollView to display a list of items with an app bar on top that minimizes as the user scrolls down the list using the following steps:
- Create a
CustomScrollView. - Add a floating app bar to
CustomScrollView. - Add a list of items to
CustomScrollView.
1. Create aCustomScrollView
# To create a floating app bar, place the app bar inside aCustomScrollView 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 theCustomScrollView widget as aListView that allows you to mix and match different types of scrollable lists and widgets together.
The scrollable lists and widgets provided to theCustomScrollView are known asslivers. There are several types of slivers, such asSliverList,SliverGrid, andSliverAppBar. In fact, theListView andGridView widgets use theSliverList andSliverGrid widgets to implement scrolling.
For this example, create aCustomScrollView that contains aSliverList. Also, remove the app bar property from your code if it exists.
MaterialApp(title:'Floating App Bar',home:Scaffold(// No app bar property provided yet.body:CustomScrollView(// Add the app bar and list of items as slivers in the next steps.slivers:<Widget>[],),),);CupertinoApp(title:'Floating Navigation Bar',home:CupertinoPageScaffold(// No navigation bar property provided yet.child:CustomScrollView(// Add the navigation bar and list of items as slivers in the next steps.slivers:<Widget>[],),),);2. Add a floating app bar
# Next, add an app bar to theCustomScrollView.
Flutter provides theSliverAppBar widget which, much like the normalAppBar widget, uses theSliverAppBar to display a title, tabs, images and more.
However, theSliverAppBar also gives you the ability to create a "floating" app bar that shrinks and floats when you're not at the top of the page.
To create this effect:
- Start with an app bar that displays only a title.
- Set the
pinnedproperty totrue. - Add a
flexibleSpacewidget that fills the availableexpandedHeight.
slivers:[// Add the app bar to the CustomScrollView.SliverAppBar(// Provide a standard title.title:Text('Floating App Bar'),// Pin the app bar when scrolling.pinned:true,// Display a placeholder widget to visualize the shrinking size.flexibleSpace:Placeholder(),// Make the initial height of the SliverAppBar larger than normal.expandedHeight:200,),], Play around with thevarious properties you can pass to theSliverAppBar widget, and use hot reload to see the results. For example, use anImage widget for theflexibleSpace property to create a background image that shrinks in size as it's scrolled offscreen.
Flutter provides theCupertinoSliverNavigationBar widget, which lets you have a "floating" navigation bar that shrinks when you scroll down and floats when you're not at the top of the page.
To create this effect:
- Add
CupertinoSliverNavigationBartoCustomScrollView. - Start with an app bar that displays only a title.
slivers:[// Add the navigation bar to the CustomScrollView.CupertinoSliverNavigationBar(// Provide a standard title.largeTitle:Text('Floating App Bar'),),],3. Add a list of items
# Now that you have the app bar in place, add a list of items to theCustomScrollView. You have two options: aSliverList or aSliverGrid. If you need to display a list of items one after the other, use theSliverList widget. If you need to display a grid list, use theSliverGrid widget.
// Next, create a SliverListSliverList.builder(// The builder function returns a ListTile with a title that// displays the index of the current item.itemBuilder:(context,index)=>ListTile(title:Text('Item #$index')),// Builds 50 ListTilesitemCount:50,)// Next, create a SliverListSliverList.builder(// The builder function returns a CupertinoListTile with a title// that displays the index of the current item.itemBuilder:(context,index)=>CupertinoListTile(title:Text('Item #$index')),// Builds 50 CupertinoListTileitemCount:50,)Interactive example
#import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { const title = 'Floating App Bar'; return MaterialApp( title: title, home: Scaffold( // No app bar provided to Scaffold, only a body with a // CustomScrollView. body: CustomScrollView( slivers: [ // Add the app bar to the CustomScrollView. const SliverAppBar( // Provide a standard title. title: Text(title), // Pin the app bar when scrolling pinned: true, // Display a placeholder widget to visualize the shrinking size. flexibleSpace: Placeholder(), // Make the initial height of the SliverAppBar larger than normal. expandedHeight: 200, ), // Next, create a SliverList SliverList.builder( // The builder function returns a ListTile with a title that // displays the index of the current item. itemBuilder: (context, index) => ListTile(title: Text('Item #$index')), // Builds 50 ListTiles itemCount: 50, ), ], ), ), ); }}
import 'package:flutter/cupertino.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { const title = 'Floating Navigation Bar'; return CupertinoApp( title: title, home: CupertinoPageScaffold( // No navigation bar provided to CupertinoPageScaffold, // only a body with a CustomScrollView. child: CustomScrollView( slivers: [ // Add the navigation bar to the CustomScrollView. const CupertinoSliverNavigationBar( // Provide a standard title. largeTitle: Text(title), ), // Next, create a SliverList SliverList.builder( // The builder function returns a CupertinoListTile with a title // that displays the index of the current item. itemBuilder: (context, index) => CupertinoListTile(title: Text('Item #$index')), // Builds 50 CupertinoListTile itemCount: 50, ), ], ), ), ); }}Unless stated otherwise, the documentation on this site reflects Flutter 3.38.6. Page last updated on 2025-10-28.View source orreport an issue.