SliverList and SliverGrid in Flutter

Every UI element is widget in flutter.For designing UI, we have multiple widgets like Container,listview,gridview.There exists a special kind of widget known as slivers.

A sliver is a section of a scrollable zone that you can mark as acting differently. Slivers can be used to create bespoke scrolling over effects, such as flexible scrolling over. Making scrollable content in Flutter is simple, whether you’re trying to pin widgets or create parallax effects.Slivers are a fantastic way to keep track of how various widgets in a format behave as the user scrolls up and down.Slivers cannot be directly used in Scaffold. We will have to add a CustomScrollView which can hold an array of slivers.

Check out more about our Flutter app development services

Following are the famous kinds of slivers that are in use:

1.SliverList

2.SliverGrid

1.SliverList

When we have to render a list of items in CustomScrollView which can be scrolled vertically, a SliverList is used. It has a property named delegate which accepts SliverChildBuilderDelegate. SliverList is especially used when the number of items in the list is not known – such as in cases where you need to render the list containing responses from the server API.

SliverChildBuilderDelegate has a property childCount of type integer which takes in the length of an array. This works similarly to Listview.builder.

For e.g.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              backgroundColor: Colors.green,
              title: Text('Silver AppBar'),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Card(
                    margin: EdgeInsets.all(15),
                    child: Container(
                      color: Colors.orange[100 * (index % 12+1)],
                      height: 60,
                      alignment: Alignment.center,
                      child: Text(
                        "List Item $index",
                        style: TextStyle(fontSize: 30),
                      ),
                    ),
                  );
                },
                childCount: 10,
              ),
            ),
          ],
        ));
  }
}

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: HomePage(),

);

}

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

body: CustomScrollView(

slivers: [

SliverAppBar(

backgroundColor: Colors.green,

title: Text('Silver AppBar'),

SliverList(

delegate: SliverChildBuilderDelegate(

(BuildContext context, int index) {

return Card(

margin: EdgeInsets.all(15),

child: Container(

color: Colors.orange[100 * (index % 12+1)],

height: 60,

alignment: Alignment.center,

child: Text(

"List Item $index",

style: TextStyle(fontSize: 30),

);

childCount: 10,

));

}

2.SliverGrid

When we have to render a list of items in CustomScrollView which can be scrolled horizontally, a SliverGrid is used. It has a property named delegate which accepts SliverChildBuilderDelegate. Like SliverList, SliverGrid is also used when the number of items on the list is not known such as in cases when there is a need to render a list containing responses from a server API.

SliverChildBuilderDelegate has a property childCount of type integer, which takes the length of an array. It is equivalent to Gridview.builder.

We have two more Grid properties in Slivers:-

SliverGrid.extent

In CustomScrollView, when the number of items in the list is already known and can be scrolled horizontally, SliverGrid.extent is used. It has a property – children – which takes in a list of widgets. SliverGrid.extent is especially used when the number of items is fixed.

SliverGrid.count

Like SliverGrid.extent, SliverGrid.count also renders a list horizontally, but it differs from the former in one way: it allows us to set the number of widgets to be rendered in SliverGrid.count. Like SliverGrid.extent, it too has the same property – children – which takes in a list of widgets. SliverGrid.count is used when the number of items is fixed.

For e.g.

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: false,
            expandedHeight: 120.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('SilverGrid AppBar'),
            ),
          ),
      SliverGrid(
        delegate: SliverChildBuilderDelegate(
              (context, index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.teal[100 * (index % 9)],
              child: Text('grid item $index'),
            );
          },
          childCount: 10,
        ),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 15,
          crossAxisSpacing: 15,
          childAspectRatio: 2.0,
        ),
      ),
          SliverToBoxAdapter(
            child: Container(
              color: Colors.yellow,
              padding: const EdgeInsets.all(8.0),
              child: Text('Grid Header', style: TextStyle(fontSize: 24)),
            ),
          ),
          SliverGrid.count(
            crossAxisCount: 3,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 4.0,
            children: <Widget>[
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
            ],
          ),
          SliverGrid.extent(
            maxCrossAxisExtent: 200,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 4.0,
            children: <Widget>[
              Container(color: Colors.pink),
              Container(color: Colors.indigo),
              Container(color: Colors.orange),
              Container(color: Colors.pink),
              Container(color: Colors.indigo),
              Container(color: Colors.orange),
            ],
          ),
        ],
      )
    );
  }
}

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: HomePage(),

);

}

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

body: CustomScrollView(

slivers: [

SliverAppBar(

floating: false,

expandedHeight: 120.0,

flexibleSpace: FlexibleSpaceBar(

title: Text('SilverGrid AppBar'),

SliverGrid(

delegate: SliverChildBuilderDelegate(

(context, index) {

return Container(

alignment: Alignment.center,

color: Colors.teal[100 * (index % 9)],

child: Text('grid item $index'),

);

childCount: 10,

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 3,

mainAxisSpacing: 15,

crossAxisSpacing: 15,

childAspectRatio: 2.0,

SliverToBoxAdapter(

child: Container(

color: Colors.yellow,

padding: const EdgeInsets.all(8.0),

child: Text('Grid Header', style: TextStyle(fontSize: 24)),

SliverGrid.count(

crossAxisCount: 3,

mainAxisSpacing: 10.0,

crossAxisSpacing: 10.0,

childAspectRatio: 4.0,

children: <Widget>[

Container(color: Colors.red),

Container(color: Colors.green),

Container(color: Colors.blue),

Container(color: Colors.red),

Container(color: Colors.green),

Container(color: Colors.blue),

SliverGrid.extent(

maxCrossAxisExtent: 200,

mainAxisSpacing: 10.0,

crossAxisSpacing: 10.0,

childAspectRatio: 4.0,

children: <Widget>[

Container(color: Colors.pink),

Container(color: Colors.indigo),

Container(color: Colors.orange),

Container(color: Colors.pink),

Container(color: Colors.indigo),

Container(color: Colors.orange),

)

);

}

I hope this blog will help in achieving fancy scrolling using slivers.

Reference Links:

https://api.flutter.dev/flutter/widgets/SliverList-class.html

https://api.flutter.dev/flutter/widgets/SliverGrid-class.html

Eraa 27 April 2023

. . .

SliverList and SliverGrid in Flutter

1.SliverList

2.SliverGrid

Leave a Comment Cancel Reply

Message Sent!