What’s CustomScrollView?

CustomScrollView class is a ScrollView that creates custom scroll effects using slivers.

Check the official documentation for more.

CustomScrollView explained for Web Developers

A CustomScrollView lets you supply slivers directly to create various scrolling effects, such as lists, grids, and expanding headers.

Example Code

Here is an example of how to use CustomScrollView:

CustomScrollView(
slivers: [
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
)

CustomScrollView Remarks

CustomScrollView is a powerful widget in Flutter that allows for complex scrolling effects and layouts.

Bootstrap Your app with ShipFlutter

A fully customizable starter kit to seamlessly launch responsive Android, iOS, and Web apps with Flutter powered by Firebase and Vertex AI.