A Complete Guide to Using Flutter Sliver App Bar

If you are looking for a way to create beautiful scrolling behaviors in your Flutter applications, the SliverAppBar widget is an excellent choice. This widget implements a flexible space with collapsing behavior, allowing users to scroll through a list of items while the app bar remains visible. This post will cover everything you need to know to use the Flutter SliverAppBar widget effectively.

Adding the SliverAppBar Widget to Your Flutter App

SliverAppBar is a Flutter widget that can be added to a Scaffold as a child of a CustomScrollView. In the example below, the SliverAppBar is set to display an image in the background, along with a title and subtitle:

CustomScrollView(
  slivers: [
    SliverAppBar(
      backgroundColor: Colors.blue,
      expandedHeight: 200.0,
      floating: false,
      pinned: true,
      flexibleSpace: FlexibleSpaceBar(
          centerTitle: true,
          title: Text("Big Ben",
              style: TextStyle(
                color: Colors.black54,
                fontSize: 16.0,
              )),
          background: Image.network(
            "https://images.pexels.com/photos/4513710/pexels-photo-4513710.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
            fit: BoxFit.cover,
          )),
    ),
    // add other slivers here
  ],
);
The code above creates a SliverAppBar with a blue background, an expanded height of 200.0 pixels, and a pinned behavior. The flexible space contains a centered title and a network image set to fill the space behind the app bar.

 SliverAppBar Properties

The SliverAppBar widget has many properties that you can use to customize your app bar behavior and appearance. Some of the most commonly used properties are described below:


    
backgroundColor - sets the color of the app bar background
    
expandedHeight – sets the initial height of the app bar when the list is expanded
    
floating - sets whether the app bar should be floating when it is scrolled
    
pinned - allows the app bar to remain visible, even when scrolling through large lists
    
flexibleSpace – defines the flexible space below the app bar, which can include images or other widgets
    
leading – defines the widget to display in the leading position of the app bar
    
actions – defines the set of widgets to display in the trailing position of the app bar


Summary

The Flutter SliverAppBar widget is a powerful tool for creating attractive and visually appealing scrolling behaviors in your applications. It is easy to add to your Flutter project and offers a wide range of customization options to help you achieve the desired results. With the tips and tricks outlined in this post, you should be well-equipped to get started using the SliverAppBar widget in your own Flutter projects.