Flutter SliverAppBar Example

Obviously, any application requires an app bar to display important information to the users and enable them to perform few actions.
We previously covered how to implement the classic App Bar inside the Scaffold layout within Flutter applications. Another special app bar that Flutter provides is SliverAppBar which has additional features that the AppBar doesn’t provide. If you’re looking for more creativity in you app bar, then SliverAppBar is the right thing to add.
In this tutorial, we’ll learn go through Flutter SliverAppBar example to learn how to implement it in our apps.

Table of Contents

The difference between AppBar and SliverAppBar

AppBar is a fixed-height bar that is displayed at the top of the screen which is used in the Scaffold.appBar slot. It doesn’t provide any animation features and doesn’t change its appearance responding to user scrolling the screen. In contrast, SliverAppBar integrates with CustomScrollView to provide scrollable and collapsible effect. Both AppBar and SliverAppBar looks the same except that SliverAppBar is responsible to scrolling events. In fact, what makes this widget unique is its animation feature that takes place when the user scrolls the screen up and down. In other words, it’s an app bar that changes its appearance as the user scrolls the screen giving an animation gesture.

Important properties of SliverAppBar

Actually, SliverAppBar has similar properties to AppBar including actions, leading, flexible space, bottom, background color, elevation, foreground color, leading width, shadow color, title, title spacing, and so on. At the same time, it also has unique properties such as expanded height, collapsed height, stretch, etc.  In addition, it has additional properties that are used to customize the animation behavioue of the SliverAppBar.

Below is a table that explains the purpose of SliverAppBar properties:

PropertyFunction
expandedHeightThe size of the app bar when it’s fully expanded
collapsedHeightThe size of the app bar when it collapses
stretchWhether the app bar should stretch to fill the over-scroll area. The app bar can still expand and contract as the user scrolls, but it will also stretch when the user over-scrolls.
pinnedWhether the app bar remains visible when collapsing
floatingWhether the app bar becomes visible at the beginning of the scrolling event towards it.
snapWorks along with floating property to control the snap view of the app bar.
understanding SliverAppBar properties

Implementing SliverAppBar

The code below demonstrates a simple implementation of the SliverAppBar. In this example, an image will be displayed when the app bar expand and disappears when the app bar collapses. In the next section, we’ll customize the app bar floating behavior and look at the different outputs.

CustomScrollView(
slivers: [
SliverAppBar(


expandedHeight: 250,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'assets/hello-world.png',
fit: BoxFit.fill,
),
title: Text('Sliver App Bar'),
),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {

},
),
actions: [
IconButton(
icon: Icon(
Icons.settings,
),
onPressed: (){},
)
],
),
SliverToBoxAdapter(
child: Container(
color: Colors.yellow,
height: 400,
width: MediaQuery.of(context).size.width,
)
),

SliverToBoxAdapter(
child: Container(
color: Colors.red,
height: 400,
width: MediaQuery.of(context).size.width,
)
),

],
)

Customizing the SliverAppBar animation properties for different outputs

By default, SliverAppBar shrinks and disappear when the user scrolls down and starts expanding once the user scrolls up to the first widget after the app bar. However, you can customize and control this behavior using the animation properties floating, pinned, and snap. Changing the values of these properties gives different output. Some of these properties, such as snap, depends on other properties (floating) and gives different result when both have the same value.

In the table below, an explanation of the output based on the value of each of the animation properties will be provided:

CasepinnedfloatingsnapResult
1falsefalsefalse

app bar shrinks and disappear when scrolling down, andsliverappbar becomes visible when user scrolls up and reach the first widget below the app bar

 

2falsetruefalseapp bar becomes visible and starts expanding as soon assliverappbar the user starts scrolling up
3truefalsefalsewhen scrolling down, the app bar collapses to a specified height (collapsed height)
4truetruefalsewhen scrolling down, the app bar collapses to a sliverappbarspecified height and starts expanding as soon as the user starts scrolling up and stops expanding with the scroll (doesn’t fully expand)
5falsetruetruethe app bar fully expands as soon as user scrolls up a bitsliverappbar
6falsefalsetruethis will generate an error because snap only works if floating is set to true
7truetruetrueapp bar collapses and sticks to the top when scrollingsliverappbar down, and expands fully when scrolling up a bit without reaching the first widget.

Adding Listener to SliverAppBar

It’s interesting to add a listener to SliverAppBar to listen to its status and take actions based on its height status. For example, you may wat to display the title in a different color when the app bar expands or collapses as we’ll be doing in this example.

First of all, let’s define the following variables which will be used later

late ScrollController _scrollController;
Color textColor = Colors.white;

Then, let’s create a function that will check if the app bar is expanded and return a bool value based on the result.

bool get _isSliverAppBarExpanded {
return _scrollController.hasClients &&
_scrollController.offset > (200 - kToolbarHeight);
}

Next, we need to assign the controller we created to the CustomScrollView

controller: _scrollController,

After that, let’s override the initState method where we’ll be adding the listener to the scroll controller then assign the color of the title based on the listener results.

@override
void initState() {
_scrollController = ScrollController()
..addListener(() {
setState(() {
textColor = _isSliverAppBarExpanded ? Colors.red : Colors.blue;
});
});
super.initState();
}
sliverappbar

Another situation where you might need to use the listener is when you have a title for the flexible space and for the SliverAppBar as these will overlap when the app bar collapses.

sliverappbar

You can solve this issue by setting the Flexible space title to only be displayed when the app bar is expanded.

title: _isSliverAppBarExpanded ? null : Text ('Title') ,

Conclusion

And there you have it, a complete Flutter SliverAppBar example that teach you everything from A to Z . Now that you know this, you’re all set up and ready to build more complex and creative apps by using one widget, YES do you believe it?!
Wanna learn more about Flutter? I have category called Flutter that’s ripe for you to explore. You can learn about Flutter widgets, layouts, onboarding screen, tabbar, inkwell and gesture detector, and practice with a bunch of real examples.

Also, don’t forget to subscribe to my blog to be one of the firsts to know about my newest posts!

Oh hi there!
It’s nice to meet you.

Sign up to receive awesome content in your inbox, every month.

Let's Do This!

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top