Flutter – SliverAppBar Widget
Last Updated :
07 Apr, 2025
SliverAppBar is a Material Design widget in Flutter that gives a scrollable or collapsible app bar. The word Sliver is given to scrollable areas here. It allows us to create an app bar that can change appearance, blend in the background, or even disappear as we scroll. We already had AppBar widget in flutter, which places the app bar at a fixed height. But, looking around us, we can see that the scrollable app bar user interface is widely used. We can see that even the GeeksforGeeks app uses the app bar, which is collapsible. To achieve the same functionality, Flutter gives us the SliverAppBar widget, which is usually taken as a child widget to CustomScrollView (flutter widget), which provides it the power to interact with the scroll.
Constructor of SliverAppBar Class:
const SliverAppBar(
{
Key key,
Widget leading,
bool automaticallyImplyLeading: true,
Widget title,
List<Widget> actions,
Widget flexibleSpace,
PreferredSizeWidget bottom,
double elevation,
Color shadowColor,
bool forceElevated: false,
Color backgroundColor,
Brightness brightness,
IconThemeData iconTheme,
IconThemeData actionsIconTheme,
TextTheme textTheme,
bool primary: true,
bool centerTitle,
bool excludeHeaderSemantics: false,
double titleSpacing: NavigationToolbar.kMiddleSpacing,
double collapsedHeight,
double expandedHeight,
bool floating: false,
bool pinned: false,
bool snap: false,
bool stretch: false,
double stretchTriggerOffset: 100.0,
Future<void> onStretchTrigger(),
ShapeBorder shape,
double toolbarHeight: kToolbarHeight,
double leadingWidth}
)
Properties of SliverAppBar Widget:
Property
| Description
|
|---|
title
| This property usually takes in the main widget as a parameter to be displayed in the SliverAppBar.
|
expandedHeight
| Similar to the collapsedHeight property, it also takes a double as a parameter and determines the height at which the SliverAppBar should be fully expanded.
|
floating
| This property takes in boolean as a Boolean parameter and controls the animation related to the visibility of the SliverAppBar. It determines whether the SliverAppBar should be made visible as soon as the user scrolls towards it (top or bottom) or not.
|
pinned
| This property sets whether the SliverAppBar should remain visible at the start of the scroll view. It takes a boolean as a parameter.
|
flexibleSpace
| This property takes in a widget as a parameter and stacks it behind the toolbar when it collapses.
|
actions
| This property takes in a list of widgets as a parameter to be displayed after the title if the SliverAppBar is a row.
|
leading
| This property sets the widget that should be displayed before the title.
|
bottom
| This property takes in PreferredSizeWidget as a parameter. And it determines the widget to be shown across the bottom of the SliverAppBar. It is usually a TabBar similar to the GeeksforGeeks app.
|
backgroundColor
| This property is used to add colors to the background of the SliverAppbar.
|
foregroundColor
| The default color for text and icons within the SliverAppBar.
|
shadowColor
| This property determines the color of the shadow that gets displayed below the SliverAppBar.
|
elevation
| This property is used to set the z-coordinate at which to place this app bar relative to its parent.
|
Example:
main.dart:
Dart
import 'package:flutter/material.dart';
// Entry point of the application
void main() => runApp(MyApp());
// Main application widget
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Title for the app bar
final title = 'GeeksforGeeks';
return MaterialApp(
home: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
// SliverAppBar provides a flexible app bar
SliverAppBar(
// App bar does not snap into view
snap: false,
// App bar is not pinned at the top
pinned: false,
// App bar does not float
floating: false,
flexibleSpace: FlexibleSpaceBar(
// Center the title in the app bar
centerTitle: true,
title: Text(
// Title text
"$title",
style: TextStyle(
// White text color
color: Colors.white,
// Font size
fontSize: 16.0,
),
),
background: Image.network(
// Background image
"https://i.ibb.co/QpWGK5j/Geeksfor-Geeks.png",
// Cover the entire space
fit: BoxFit.cover,
),
),
// Height of the expanded app bar
expandedHeight: 230,
// Background color
backgroundColor: Colors.greenAccent[400],
leading: IconButton(
// Menu icon
icon: Icon(Icons.menu),
// Tooltip for the menu icon
tooltip: 'Menu',
// Action for the menu icon
onPressed: () {},
),
actions: <Widget>[
IconButton(
// Comment icon
icon: Icon(Icons.comment),
// Tooltip for the comment icon
tooltip: 'Comment Icon',
// Action for the comment icon
onPressed: () {},
),
IconButton(
// Settings icon
icon: Icon(Icons.settings),
// Tooltip for the settings icon
tooltip: 'Setting Icon',
// Action for the settings icon
onPressed: () {},
),
],
),
// SliverList displays a scrollable list of items
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(
tileColor: (index % 2 == 0)
? Colors.white
: Colors.green[50], // Alternating tile colors
title: Center(
child: Text(
// Display the index as text
'$index',
style: TextStyle(
// Normal font weight
fontWeight: FontWeight.normal,
// Font size
fontSize: 50,
// Text color
color: Colors.greenAccent[400],
),
),
),
),
// Number of items in the list
childCount: 51,
),
),
],
),
),
// Remove debug banner
debugShowCheckedModeBanner: false,
);
}
}
Output:
If the properties are defined as follows:
snap: false;
pinned: false;
floating: false;
Output:
If the properties are defined as follows:
snap: false;
pinned: false;
floating: true;
Output:
If the properties are defined as follows:
snap: false;
pinned: true;
floating: false;
Output:
If the properties are defined as follows:
snap: true;
pinned: false;
floating: true;
Output:
If the properties are defined as follows:
snap: true;
pinned: true;
floating: true;
Similar Reads
Flutter - SizedBox Widget
SizedBox is a built-in widget in flutter SDK. It is a simple box with a specified size. It can be used to set size constraints to the child widget, put an empty SizedBox between the two widgets to get some space in between, or something else. It is somewhat similar to a Container widget with fewer p
3 min read
Flutter - GridPaper Widget
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. How to use it?[GFGTABS] Dart G
3 min read
Flutter - ShaderMask Widget
ShaderMask is a widget in Flutter that applies a shader to its child. It allows you to create various visual effects by manipulating the colors and gradients of the child widget. In this article, we are going to implement the ShaderMask widget and explore some properties of it. Basic Syntax of Shade
4 min read
Flutter - Slide Transition Widget
In this article, we will explore the Flutter Slide Transition Widget. The Slide Transition widget allows animating a widget's position relative to its normal position. It helps us to develop a visually appealing and interactive user Interface. A sample video is given below to get an idea about what
4 min read
Flutter - Stack Widget
The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
Flutter - Transform Widget
The Transform widget in Flutter is used to apply various transformations to its child widget, such as rotation, translation (positioning), scaling, and skewing. In this article, we are going to implement all transformations such as rotation, translation (positioning), scaling, and skewing made by th
6 min read
Flutter - SizeTransition Widget
In this article, we will explore the Flutter SizeTransition Widget. The Size Transition Widget is a key tool in Flutter that lets you animate the size of a child widget. It can be used to make a widget appear or vanish, create a zoom-in or zoom-out effect, and for many more things. A sample video is
7 min read
Flutter - Inherited Widget
If you are a flutter developer then you know how easy is to create Flutter UI. But when you have lots of widgets in your app and you want to pass data from one widget to another widget, this will be a pain for many developers,s especially for the newbie, this will be really hard for them to pass the
6 min read
Opacity Widget in Flutter
The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent. For values of opacity other than 0.0 and 1.0, this class is relatively expensive as it needs coloring the child
2 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read