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
• Important properties of SliverAppBar
• Implementing SliverAppBar
• Customizing the SliverAppBar animation properties for different outputs
• Adding Listener to SliverAppBar
• Conclusion

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:

Property	Function
expandedHeight	The size of the app bar when it’s fully expanded
collapsedHeight	The size of the app bar when it collapses
stretch	Whether 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.
pinned	Whether the app bar remains visible when collapsing
floating	Whether the app bar becomes visible at the beginning of the scrolling event towards it.
snap	Works along with floating property to control the snap view of the app bar.

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:

Case	pinned	floating	snap	Result
1	false	false	false	app bar shrinks and disappear when scrolling down, and becomes visible when user scrolls up and reach the first widget below the app bar
2	false	true	false	app bar becomes visible and starts expanding as soon as the user starts scrolling up
3	true	false	false	when scrolling down, the app bar collapses to a specified height (collapsed height)
4	true	true	false	when scrolling down, the app bar collapses to a specified height and starts expanding as soon as the user starts scrolling up and stops expanding with the scroll (doesn’t fully expand)
5	false	true	true	the app bar fully expands as soon as user scrolls up a bit
6	false	false	true	this will generate an error because snap only works if floating is set to true
7	true	true	true	app bar collapses and sticks to the top when scrolling 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();
}

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.

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!