Flutter - Custom Scroll View
Last Updated :
08 Jun, 2025
A CustomScrollView in Flutter is a highly customizable scrolling widget that allows you to create complex scrolling effects and layouts. You can use it to create scrollable views with multiple slivers, each having its behavior. In this article, we are going to implement the CustomScrollView widget.
A sample video is given below to get an idea of what we are going to do in this article.
Demo Video
CustomScrollView(
slivers: <Widget>[
// List of sliver widgets
SliverWidget1(
// Sliver widget properties
),
SliverWidget2(
// Sliver widget properties
),
// ... More sliver widgets ...
],
)
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step-by-Step Implementation
Step 1: Create a new Flutter Application
Create a new Flutter application using the command Prompt. To create a new app, type the following command and run it.
flutter create app_name
To know more about it refer this article: Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all, import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here, the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class, we are going to implement the MaterialApp, Here, we are also setting the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
title: 'CustomScrollView Example',
home: CustomScrollViewExample(),
);
}
}
In this class, we are going to implement the CustomScrollView with a SliverAppBar that has an expandable image background and a SliverList containing a list of items. Comments are added for better understanding.
CustomScrollView(
slivers: <Widget>[
// SliverAppBar
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'CustomScrollView', // Title text for the SliverAppBar
style: TextStyle(color: Colors.black, fontSize: 15),
),
background: Image.network(
'https://static.startuptalky.com/2021/06/GeeksforGeeks-StartupTalky.jpg', // Replace with your image URL
fit: BoxFit.cover, // Ensure the image covers the entire space
),
),
),
// SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'), // Display list item with index
);
},
childCount: 50, // Number of list items
),
),
],
),
Dart
class CustomScrollViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CustomScrollView Example'),
),
body: CustomScrollView(
slivers: <Widget>[
// SliverAppBar
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'CustomScrollView', // Title text for the SliverAppBar
style: TextStyle(color: Colors.black, fontSize: 15),
),
background: Image.network(
'https://static.startuptalky.com/2021/06/GeeksforGeeks-StartupTalky.jpg', // Replace with your image URL
fit: BoxFit.cover, // Ensure the image covers the entire space
),
),
),
// SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'), // Display list item with index
);
},
childCount: 50, // Number of list items
),
),
],
),
);
}
}
Complete Source Code
main.dart:
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
title: 'CustomScrollView Example',
home: CustomScrollViewExample(),
);
}
}
class CustomScrollViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('CustomScrollView Example'),
),
body: CustomScrollView(
slivers: <Widget>[
// SliverAppBar
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text(
'CustomScrollView', // Title text for the SliverAppBar
style: TextStyle(color: Colors.black, fontSize: 15),
),
background: Image.network(
'https://static.startuptalky.com/2021/06/GeeksforGeeks-StartupTalky.jpg', // Replace with your image URL
fit: BoxFit.cover, // Ensure the image covers the entire space
),
),
),
// SliverList
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'), // Display list item with index
);
},
childCount: 50, // Number of list items
),
),
],
),
);
}
}
Output:
Similar Reads
Flutter - Animated ScrollView Creating an animated scroll view in Flutter involves using a combination of widgets and animation controllers to achieve the desired scrolling effect. Here we use Tween Animation to implement animation. In this article we are going to add an animation effect to a ScrollView A sample video is given b
5 min read
Flutter - Nested Scroll View In Flutter, you can use a NestedScrollView widget to create a scrollable view with multiple scrolling sections that can scroll independently of each other. This is commonly used when you have a header that should remain visible while the content below it scrolls. In this article, we are going to imp
4 min read
Flutter - Custom Widgets We create Custom Widgets when we want a custom look and feel to our app, and we know that there will be a repetition of a particular widget. We can create the custom widget in a new dart file with all the codes and defining the parameters that we need in the constructor. For more on how to split wid
8 min read
Flutter - Scrollable Text In this article, we are going to make a Flutter application in which we will add a Text Widget that can be scrolled horizontally or vertically. These can have a wide range of applications depending upon the needs of the users. Here we will be implementing the simplest form of scrollable text. We can
3 min read
ListView Class in Flutter In Flutter, ListView is a scrollable list of widgets arranged linearly. It displays its children sequentially in the scrolling direction, either vertically or horizontally. There are different types of ListViews :ListViewListView.builderListView.separatedListView.customConstructor of ListView Class:
6 min read
Flutter - GridView Flutter's GridView is a widget similar to a 2-D array found in many programming languages. As its name indicates, the GridView widget is used to display content in a grid format. This allows us to showcase images, text, icons, and more within the GridView. There are several ways to implement GridVie
6 min read