Add Scrolling intro page (#9068)

This removes the Slivers page from the Advanced UI section into its own
Scrolling section. We will also be adding scrolling recipes to the
sidebar of this section.

The intro page kind of grew to be longer than I planned...

This also adds a tooling error to the common errors page.

Fixes #9064

cc @Piinks  @parlough

---------

Co-authored-by: Parker Lougheed <[email protected]>

Author: sfshaza2

firebase.json

@@ -62,6 +62,7 @@
       { "source": "/ios-release", "destination": "/deployment/ios", "type": 301 },
       { "source": "/jobs/**", "destination": "/jobs", "type": 301 },
       { "source": "/json", "destination": "/data-and-backend/json", "type": 301 },
+      { "source": "/ui/advanced/slivers", "destination": "/ui/scrolling/slivers", "type": 301 },
       { "source": "/ui/layout/box-constraints", "destination": "/ui/layout/constraints#unbounded", "type": 301 },
       { "source": "/networking", "destination": "/data-and-backend/networking", "type": 301 },
       { "source": "/overview", "destination": "/resources/architectural-overview", "type": 301 },

src/_data/sidenav.yml

@@ -102,6 +102,14 @@
           permalink: /ui/animations/hero-animations
         - title: Staggered animations
           permalink: /ui/animations/staggered-animations
+    - title: Scrolling
+      permalink: /ui/scrolling
+      children:
+        - title: Introduction
+          permalink: /ui/scrolling
+          match-page-url-exactly: true
+        - title: Slivers
+          permalink: /ui/scrolling/slivers
     - title: Advanced UI
       permalink: /ui/advanced
       children:
@@ -115,8 +123,6 @@
           permalink: /ui/advanced/gestures
         - title: Shaders
           permalink: /ui/advanced/shaders
-        - title: Slivers
-          permalink: /ui/advanced/slivers
     - title: Widget catalog
       permalink: /ui/widgets
 

src/testing/common-errors.md

@@ -15,15 +15,6 @@ future revisions, and your contributions are welcomed.
 Feel free to [open an issue][] or [submit a pull request][] to
 make this page more useful to you and the Flutter community. 
 
-{{site.alert.important}}
-  You might be directed to this page if the
-  framework detects a problem involving box constraints.
-  For a deeper look into Flutter's box constraints,
-  check out [Understanding constraints][].
-{{site.alert.end}}
-
-[Understanding constraints]: {{site.url}}/ui/layout/constraints
-
 [open an issue]: {{site.github}}/flutter/website/issues/new/choose
 [submit a pull request]: {{site.github}}/flutter/website/pulls
 
@@ -148,6 +139,7 @@ The resources linked below provide further information about this error.
 [its source code]: {{site.repo.flutter}}/blob/c8e42b47f5ea8b5ff7bf2f2b0a2a8e765f1aa51d/packages/flutter/lib/src/widgets/basic.dart#L5166-L5174
 [flexible-video]: ({{site.youtube-site}}/watch?v=CI7x0mAZiY0)
 [medium-article]: {{site.flutter-medium}}/how-to-debug-layout-issues-with-the-flutter-inspector-87460a7b9db#738b
+[Understanding constraints]: {{site.url}}/ui/layout/constraints
 
 ## ‘RenderBox was not laid out’
 
@@ -498,6 +490,23 @@ class FirstScreen extends StatelessWidget {
 }
 ```
 
+## `The ScrollController is attached to multiple scroll views`
+
+This error can occur when multiple scrolling
+widgets (such as `ListView`) appear on the
+screen at the same time. It's more likely for
+this error to occur on a web or desktop app,
+than a mobile app since it's rare to encounter
+this scenario on mobile.
+
+For more information and to learn how to fix,
+check out the following video on
+[`PrimaryScrollController`][controller-video]:
+
+[controller-video]: <iframe width="560" height="315" src="https://www.youtube.com/embed/33_0ABjFJUU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`
+
+[`PrimaryScrollController`]: {{site.api}}/flutter/widgets/PrimaryScrollController-class.html
+
 ## References
 
 To learn more about how to debug errors,

src/ui/scrolling/index.md

@@ -0,0 +1,94 @@
+---
+title: Scrolling
+description: 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.
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/DbkIQSvwnZc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/KJpkjHGiI5A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+## 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`]: {{site.api}}/flutter/widgets/ListView/ListView.builder.html
+[`GridView.builder`]: {{site.api}}/flutter/widgets/GridView/GridView.builder.html
+
+### Specialized scrollable widgets
+
+The following widgets provide more specific scrolling
+behavior.
+
+A video on using [`DraggableScrollableSheet`][]
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Hgw819mL_78" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+Turn the scrollable area into a wheel! [`ListWheelScrollView`][]
+<iframe width="560" height="315" src="https://www.youtube.com/embed/dUhmWAz4C7Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+
+[`DraggableScrollableSheet`]: {{site.api}}/flutter/widgets/DraggableScrollableSheet-class.html
+[`GridView`]: {{site.api}}/flutter/widgets/GridView-class.html
+[`ListView`]: {{site.api}}/flutter/widgets/ListView-class.html
+[`ListWheelScrollView`]: {{site.api}}/flutter/widgets/ListWheelScrollView-class.html
+[scrolling page]: {{site.url}}/ui/widgets/scrolling
+[`SingleChildScrollView`]: {{site.api}}/flutter/widgets/SingleChildScrollView-class.html 
+
+{% comment %}
+  Not yet, but coming. Two dimensional scrolling:
+  TableView and TreeView.
+  Video: https://www.youtube.com/watch?v=UDZ0LPQq-n8
+{% endcomment %}
+
+## 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`]: {{site.api}}/flutter/widgets/CustomScrollView-class.html
+[Sliver classes]: {{site.url}}/ui/widgets/layout#Sliver%20widgets
+[Using slivers to achieve fancy scrolling]: {{site.url}}/ui/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:
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/LUqDNnv_dh0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

src/ui/advanced/slivers.md renamed to src/ui/scrolling/slivers.md

@@ -9,7 +9,7 @@ can define to behave in a special way.
 You can use slivers to achieve custom scrolling effects,
 such as elastic scrolling.
 
-For a free, instructor-led video workshop that also uses DartPad,
+For a free, instructor-led video workshop that uses DartPad,
 check out the following video about using slivers:
 
 <iframe width="560" height="315" src="{{site.youtube-site}}/embed/YY-_yrZdjGc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
@@ -27,7 +27,7 @@ in Flutter, see the following resources:
     using the sliver classes.
 </dd>
 
-<dt markdown="1"> **[SliverAppBar][]**
+<dt markdown="1"> **[SliverAppBar][sliver-app-bar-video]**
 </dt>
 <dd markdown="1">A one-minute Widget-of-the-week
     video that gives an overview of the
@@ -59,12 +59,14 @@ in Flutter, see the following resources:
 
 Here some links to relevant API docs:
 
+* [`CustomScrollView`][]
 * [`SliverAppBar`][]
 * [`SliverGrid`][]
 * [`SliverList`][]
 
 
-[SliverAppBar]: {{site.youtube-site}}/watch?v=R9C5KMJKluE
+[`CustomScrollView`]: {{site.api}}/flutter/widgets/CustomScrollView-class.html`
+[sliver-app-bar-video]: {{site.youtube-site}}/watch?v=R9C5KMJKluE
 [`SliverAppBar`]: {{site.api}}/flutter/material/SliverAppBar-class.html
 [`SliverGrid`]: {{site.api}}/flutter/widgets/SliverGrid-class.html
 [SliverList and SliverGrid]: {{site.youtube-site}}/watch?v=ORiTTaVY6mM