In all mobile applications, scrolling is one of the most fundamental interaction types, which allows the user to stay in sync with the application. In Flutter, this interactivity can be obtained in several ways, one of them is by using CustomScrollView.
CustomScrollView?CustomScrollView is a built-in widget for Flutter applications that acts as a container for multiple scrollable components, also known as slivers.
Slivers are the individual scrollable components that are contained inside a CustomScrollView widget. Multiple slivers are combined to, thus, create a complex scrollable layout for your mobile application.
Moreover, each sliver present inside the CustomScrollView is responsible for rendering a specific part of the application page inside a scrollable area.
Slivers can be used to create a scrollable and customized layout, allowing users to interact with the application. They can be used to create various scrollable components such as headers, grids, lists, and more.
Let's briefly go over each type of sliver and discuss their uses.
SliverAppBar: This type of sliver is used to create a flexible app bar inside the CustomScrollView widget. This app bar comes pre-built with the functionality to expand and collapse according to the scrolling direction of the user.
SliverList: It is used to create a list of widgets that are linear and scrollable. It is highly useful and efficient in displaying a large number of widgets on the screen that can't fit inside the screen all at once.
SliverGrid: This type of sliver is used to create a scrollable grid layout on your Flutter app's screen. The grid is flexible, meaning it can accommodate a large number of items, all the while allowing the user to customize the grid's layout and spacing.
SliverFillRemaining: This is mainly used to fill the remaining space in the screen when there are not enough items available in CustomScrollView to cover the available space.
CustomScrollView in your Flutter appJust like any other widget, you can use the CustomScrollView widget by simply importing the necessary packages and using them.
The CustomScrollView widget belongs to the material packages of the Flutter and here's how you can import them.
import 'package:flutter/material.dart';
SliverList in the CustomScrollView widgetIn this example, we create a CustomScrollView and inside it, we define two slivers: SliverAppBar and SliverList.
import 'package:flutter/material.dart';
class CustomScrollViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('CustomScrollView Example'),
floating: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
padding: EdgeInsets.symmetric(vertical: 8.0,horizontal:10),
child:ListTile(
tileColor:Colors.blue[800],
title: Text('Item $index',style:TextStyle(color:Colors.white),),
),
);
},
childCount: 20,
),
),
],
),
);
}
}
Lines 7–11: The SliverAppBar represents the collapsible app bar at the top of the scrollable area. It includes a title, Text('CustomScrollView Example'), and a floating bool variable that is set to true.
Lines 13–26: We initialize a SliverList that renders a scrollable list of items. We use SliverChildBuilderDelegate to specify how to build each item in the list. In this example, we create a ListTile for each item, displaying the item index as the title. We set childCount to 20 to specify the number of items in the list.
By combining these two slivers, we achieve a scrollable layout with a collapsing app bar and a list of items. You can further customize the behavior and appearance of the CustomScrollView by exploring other available slivers and their properties.
SliverGrid in the CustomScrollView widgetNow let's incorporate CustomScrollView in our app and use different sliver types to understand the concept in a better way.
import 'package:flutter/material.dart';
class CustomScrollViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
title: Text('CustomScrollView Example'),
floating: true,
backgroundColor: Colors.blue[800],
),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio:0.8,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
final letter = 'educative'.toUpperCase()[index];
return Container(
color: Colors.blue,
child: Center(
child: Text(
letter,
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
);
},
childCount: 9,
),
),
],
),
);
}
}
Inside the body of the Scaffold, a CustomScrollView is used. The CustomScrollView has a list of slivers defined within the slivers property. In this case, there are two slivers: SliverAppBar and SliverGrid.
Lines 9–13: The SliverAppBar represents the app bar at the top of the scrollable area.
It has a title property that displays the text 'CustomScrollView Example.'
The floating property is set to true, allowing the app bar to float above the content when scrolling.
The backgroundColor is set to Colors.blue[800], specifying the background color for the app bar.
Lines 15–19: The SliverGrid represents a grid of items. It uses SliverGridDelegateWithFixedCrossAxisCount as the gridDelegate, which defines the grid layout.
In this case, the grid has 3 columns (crossAxisCount: 3).
The mainAxisSpacing and crossAxisSpacing properties add spacing between the grid tiles vertically and horizontally, respectively.
The childAspectRatio is set to 0.8, determining the ratio of the width to height for each grid tile.
Lines 22–40: The delegate property of SliverGrid uses SliverChildBuilderDelegate, which is responsible for building each grid tile.
The builder function takes the context and index parameters and returns a container with a colored background and a centered Text widget.
The letter variable represents each letter from the string 'educative'. The childCount is set to 9, specifying the total number of grid tiles.
Free Resources