Flutter – SliverAppBar Widget

SliverAppBar is a Material Design widget in flutter which gives scrollable or collapsible app-bar. The word Sliver is given to scrollable areas here. SliverAppBar basically gives us means 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 that even the GeeksforGeeks app uses the app bar which is collapsible.  In order to achieve the same functionality, flutter gives us SliverAppBar widget, which is usually taken as a child widget to CustomScrollView (flutter widget), which provided it the power to interact with 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: 

• action: This property takes in a list of widgets as a parameter to be displayed after the title if the SliverAppBar is a row.
• actionIconTheme: This property determines the color, opacity, and size of trailing app bar icons.
• automaticallyImplyLeading: This property takes in a boolean as a parameter and controls whether to imply the leading widget if the boolean is null.
• backgroundColor: This property is used to add colors to the background of the SliverAppbar.
• 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 GeeksforGeeks app.
• brightness: This property controls the brightness of the SliverAppBar.
• centerTitle: This property determines whether the title widget should be in the center of the SliverAppBar or not. by taking a boolean as a parameter.
• collapsedHeight: This property controls at which height the SliverAppBar should collapse.
• elevation: This property is used to set the z-coordinate at which to place this app bar relative to its parent.
• excludeHeaderSemantics: This property takes boolean as a parameter and controls whether the title widget should be wrapped in header Semantics which describe the widgets used in the app.
• 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.
• flexibleSpace: This property takes in widget as a parameter and stacks it behind the took bar when it collapses.
• floating: This property takes in boolean as a 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.
• forceElevated:  This property controls whether to show shadow for the elevation or not if the content is not scrolled under SliverAppBar.
• iconTheme: This property is similar to the actionIconTheme. It controls the color, size, opacity, etc of the icon used in the SliverAppBar.
• leading: This property sets the widget that should be displayed before the title.
• leadingWidth: This property takes double as a parameter and controls the width of the leading widget.
• onStretchTrigger: This property takes in AsyncCallback as a parameter, which gets triggered when the user over-scrolls.
• pinned; This property sets whether the SliverAppBar should remain visible at the start of scroll view. It takes a boolean as a parameter.
• primary: This property takes boolean as a parameter and controls whether the SliverAppBar is being displayed at the top of the screen or not.
• shadowColor: This property determines the color of the shadow which gets displayed below SliverAppBar.
• shape: This property is used to give shape to the SliverAppbar and manage its shadow.
• snap: This property takes boolean as a parameter and if set true it makes the SliverAppBar snap in the view when a user scrolls near it instead of smoothly animated. There is one constraint to snap property that it can only be set to true when floating is also set to true.
• stretch: Again, this property also takes a boolean as a parameter to determine whether the SliverAppBar should stretch to the full space of the over-scroll area.
• stretchTriggerOffset:  This property determines the offset of over-scroll which activates onStretch property.
• textTheme: This property takes TextTheme widget as a parameter to determine the typography style used in the SliverAppBar.
• title: This property usually takes in the main widget as a parameter to be displayed in the SliverAppBar.
• titleSpacing: This property determines the amount of spacing around the title widget in a horizontal fashion.
• toolbarHeight: This property controls the height given to the toolbar portion of the SliverAppBar.

Example:

src/lib/main.dart

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    final title = 'GeeksforGeeks';

    return MaterialApp(
      home: Scaffold(
          body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            snap: false,
            pinned: false,
            floating: false,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("$title",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ) //TextStyle
                    ), //Text
                background: Image.network(
                  "https://i.ibb.co/QpWGK5j/Geeksfor-Geeks.png",
                  fit: BoxFit.cover,
                ) //Images.network
                ), //FlexibleSpaceBar
            expandedHeight: 230,
            backgroundColor: Colors.greenAccent[400],
            leading: IconButton(
              icon: Icon(Icons.menu),
              tooltip: 'Menu',
              onPressed: () {},
            ), //IconButton
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.comment),
                tooltip: 'Comment Icon',
                onPressed: () {},
              ), //IconButton
              IconButton(
                icon: Icon(Icons.settings),
                tooltip: 'Setting Icon',
                onPressed: () {},
              ), //IconButton
            ], //<Widget>[]
          ), //SliverAppBar
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                tileColor: (index % 2 == 0) ? Colors.white : Colors.green[50],
                title: Center(
                  child: Text('$index',
                      style: TextStyle(
                          fontWeight: FontWeight.normal,
                          fontSize: 50,
                          color: Colors.greenAccent[400]) //TextStyle
                      ), //Text
                ), //Center
              ), //ListTile
              childCount: 51,
            ), //SliverChildBuildDelegate
          ) //SliverList
        ], //<Widget>[]
      ) //CustonScrollView
          ), //Scaffold
      debugShowCheckedModeBanner:false,
         // Remove debug banner for proper
         // view of setting icon
    ); //MaterialApp
  }
}

Explanation:

At first, we have imported the material library. Then we have our main function which calls the MyApp class through runApp method. We have set the MyApp class to be a stateless widget. Then with the  Widget build(BuildContext context) we have started describing the UI of the app. 

Our MaterialApp starts with the Scaffold widget. Then in the CustomScrollView widget, we have slivers property that takes a list of widgets and makes them scrollable. We have passed SliverAppBar as the first child in the sliver. The first three properties snap, pinned and floating have been made false for the first case. We are going to use five combinations of these three properties to give different effects to our SliverAppBar. In FLexibleSpaceBar widget we have passes the title and the cover image with their respective properties. In the leading widget, we have the menu icon button and in the action widget, we have comment and setting icon buttons. 

All this is followed by the SliverList widget which forms the body of our app here. It contains 51 list tiles indexed from 0 to 51.

Below we have five different outputs for five different combinations of the snap, pinned, and floating property.

Output:

If the properties are defines as follows:

snap: false;
pinned: false;
floating: false;

Output:

If the properties are defines as follows:

snap: false;
pinned: false;
floating: true;

Output:

If the properties are defines as follows:

snap: false;
pinned: true;
floating: false;

Output:
If the properties are defines as follows:

snap: true;
pinned: false;
floating: true;

Output:

If the properties are defines as follows:

snap: true;
pinned: true;
floating: true;