# Scrolling

> Overview of Flutter's scrolling support



Flutter has many built-in widgets that automatically
scroll and also offers a variety of widgets
that you can customize to create specific scrolling
behavior.

## Basic scrolling

Many Flutter widgets support scrolling out of the box
and do most of the work for you. For example,
[`SingleChildScrollView`][] automatically scrolls its
child when necessary. Other useful widgets include
[`ListView`][] and [`GridView`][].
You can check out more of these widgets on the
[scrolling page][] of the Widget catalog.

<YouTubeEmbed id="DbkIQSvwnZc" title="Scrollbar | Flutter widget of the week"></YouTubeEmbed>

<YouTubeEmbed id="KJpkjHGiI5A" title="ListView | Flutter widget of the week"></YouTubeEmbed>

### Infinite scrolling

When you have a long list of items
in your `ListView` or `GridView` (including an _infinite_ list),
you can build the items on demand
as they scroll into view. This provides a much
more performant scrolling experience.
For more information, check out
[`ListView.builder`][] or [`GridView.builder`][].

[`ListView.builder`]: https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html
[`GridView.builder`]: https://api.flutter.dev/flutter/widgets/GridView/GridView.builder.html

### Specialized scrollable widgets

The following widgets provide more
specific scrolling behavior.

A video on using [`DraggableScrollableSheet`][]:

<YouTubeEmbed id="Hgw819mL_78" title="DraggableScrollableSheet | Flutter widget of the week"></YouTubeEmbed>

Turn the scrollable area into a wheel with [`ListWheelScrollView`][]!

<YouTubeEmbed id="dUhmWAz4C7Y" title="ListWheelScrollView | Flutter widget of the week"></YouTubeEmbed>

[`DraggableScrollableSheet`]: https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html
[`GridView`]: https://api.flutter.dev/flutter/widgets/GridView-class.html
[`ListView`]: https://api.flutter.dev/flutter/widgets/ListView-class.html
[`ListWheelScrollView`]: https://api.flutter.dev/flutter/widgets/ListWheelScrollView-class.html
[scrolling page]: /ui/widgets/scrolling
[`SingleChildScrollView`]: https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html



## Fancy scrolling

Perhaps you want to implement _elastic_ scrolling,
also called _scroll bouncing_. Or maybe you want to
implement other dynamic scrolling effects, like parallax scrolling.
Or perhaps you want a scrolling header with very specific behavior,
such as shrinking or disappearing.

You can achieve all this and more using the
Flutter `Sliver*` classes.
A _sliver_ refers to a piece of the scrollable area.
You can define and insert a sliver into a [`CustomScrollView`][]
to have finer-grained control over that area.

For more information, check out
[Using slivers to achieve fancy scrolling][]
and the [Sliver classes][].

[`CustomScrollView`]: https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html
[Sliver classes]: /ui/widgets/layout#sliver-widgets
[Using slivers to achieve fancy scrolling]: /ui/layout/scrolling/slivers

## Nested scrolling widgets

How do you nest a scrolling widget
inside another scrolling widget
without hurting scrolling performance?
Do you set the `ShrinkWrap` property to true,
or do you use a sliver?

Check out the "ShrinkWrap vs Slivers" video:

<YouTubeEmbed id="LUqDNnv_dh0" title="ShrinkWrap vs Slivers | Decoding Flutter"></YouTubeEmbed>