Sliver Widget In Flutter

Introduction

Hi friends!! Do you want to create complex and modern UI designs in Flutter? If yes, then this article is surely good for you. The sliver widget is one of the advanced concepts in Flutter and it provides smooth and fancy scrolling experience for your Flutter app. Sliver widgets are designed to work seamlessly with the CustomScrollView widget. Please always make sure that any sliver widget is used inside CustomScrollView. The Sliver widget is beneficial when we need to display multiple lists on the screen, and the requirement is for the entire page to scroll as one unit instead of individual lists scrolling separately.

Prerequisite

Basic knowledge of Flutter
Having the latest version of Android Studio

In Flutter, there are several Sliver widgets, but the most common and frequently used widget are as follow.

SliverAppBar
SliverToBoxAdapter
SliverList
SliverGrid

SliverAppBar Widget in Flutter

In Flutter, SliverAppBar is a special widget that provides a collapsible app bar that can be used within a CustomScrollView. It's commonly used to create a flexible app bar that can expand and contract as the user scrolls through content.

Important Properties In SliverAppBar Widget.

expandedHeight: This property defines the height of the app bar when it's fully expanded. As you scroll, the app bar will shrink from this height down to its regular size.
floating: When floating is set to true, the app bar can "float" above the content as the user scrolls down. This means that when the user scrolls back up, the app bar will quickly snap back to its full height. This behavior is useful for providing quick access to app bar actions.
pinned: When pinned set to true, the app bar will remain pinned at the top of the screen even as the user scrolls.
snap: If both floating and pinned are true, the app bar snaps to fully opened or fully collapsed when scrolling.
flexibleSpace: This property allows you to define the flexible content that appears within the app bar as it expands and collapses.
title: The title displayed in the app bar when it's fully expanded.
actions: A list of widgets that represent actions or icons to be displayed in the app bar. These are often used for actions like searches, settings, or user profiles.

Example

CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200.0, // Max height when fully expanded
            floating: true, // Doesn't float above content
            pinned: true, // Stays pinned to the top
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Flutter News"), // Title when fully expanded
              background: Image.network(
                "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
                fit: BoxFit.fill,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (context, index) {
                // Build your news article content here
                return ListTile(
                  title: Text("News Headline $index"),
                  subtitle: Text("Author Name"),
                );
              },
              childCount: 20, // Number of news articles
            ),
          ),
        ],
),

Output

SliverToBoxAdapter Widget in Flutter

This widget is really good because it allows adding of non-sliver widgets inside the CustomScrollView widget. Using this widget, we can add widgets such as ListView, Text, Row, Column, etc., inside the CustomScrollView widget.

Example

    CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: SizedBox(height: 70,),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 100.0,
              color: Colors.orange,
              child: Center(
                child: Text(
                  'Container 1',
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: SizedBox(height: 30,),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: 100.0,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Container 2',
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
            ),
          ),
        ],
      ),

Output

SliverList Widget in Flutter

In Flutter, the SliverList widget works the same as the ListView widget, but SliverList is more optimized for scrollable. A SliverList is a sliver-based widget that allows you to create a scrollable list of items within a CustomScrollView. They work together to provide efficient scrolling behavior for large or dynamic content. The SliverList widget takes a SliverChildDelegate (such as SliverChildBuilderDelegate or SliverChildListDelegate) to generate its list items.

Example

     CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("My App"),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20, // Number of items in the list
            ),
          ),
        ],
      )

Output

SliverGrid Widget in Flutter

In Flutter, SliverGrid is also a sliver-based widget that allows you to create a scrollable grid of items within a CustomScrollView. Just like other sliver widgets, SliverGrid is optimized for efficient scrolling and is used to display a grid of items.

Basic Syntax

CustomScrollView(
  slivers: <Widget>[
    // SliverGrid widget for creating a scrollable grid
    SliverGrid(
      // Define the layout of the grid
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: numberOfColumns, // Number of columns in the grid
        mainAxisSpacing: spacing,        // Spacing between rows
        crossAxisSpacing: spacing,       // Spacing between columns
      ),
      // Delegate for generating grid items efficiently
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          // Build your custom grid item widget here
          return YourGridItemWidget(); // Replace with your grid item widget
        },
        childCount: itemCount, // Total number of grid items
      ),
    ),
  ],
)

Example

 CustomScrollView(
        slivers: <Widget>[
          SliverToBoxAdapter(
            child: SizedBox(height: 60,),
          ),
          SliverGrid(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              mainAxisSpacing: 10.0,
              crossAxisSpacing: 5.0,
            ),
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 5),
                  color: Colors.blue.shade300,
                  child: Center(
                    child: Text('Item $index'),
                  ),
                );
              },
              childCount: 20,
            ),
          ),
        ],
 )

Output

Conclusion

In this article, we have seen how to use different sliver widgets in Flutter. Thanks for reading, and hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!