Update horizontal list recipe (#12599)

- Add more items to the list so the list is scrollable on wider
displays.
- Creates one container for each of Flutter's supported primary colors
rather than hard coding the list.
- Highlight the primary `scrollDirection: Axis.horizontal,` line rather
than relying on an inline comment.
- Add a custom scroll behavior to the list so it's draggable on desktops
as well.
- Rely on a new inline comment about this rather than the note now that
the referenced change has occurred a long time ago.
  
Fixes #12596

Author: parlough

examples/cookbook/lists/horizontal_list/lib/main.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 void main() => runApp(const MyApp());
@@ -7,7 +9,7 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const title = 'Horizontal List';
+    const title = 'Horizontal list';
 
     return MaterialApp(
       title: title,
@@ -16,19 +18,22 @@ class MyApp extends StatelessWidget {
         body: Container(
           margin: const EdgeInsets.symmetric(vertical: 20),
           height: 200,
-          // #docregion ListView
-          child: ListView(
-            // This next line does the trick.
-            scrollDirection: Axis.horizontal,
-            children: <Widget>[
-              Container(width: 160, color: Colors.red),
-              Container(width: 160, color: Colors.blue),
-              Container(width: 160, color: Colors.green),
-              Container(width: 160, color: Colors.yellow),
-              Container(width: 160, color: Colors.orange),
-            ],
+          child: ScrollConfiguration(
+            // Add a custom scroll behavior that
+            // allows all devices to drag the list.
+            behavior: const MaterialScrollBehavior().copyWith(
+              dragDevices: {...PointerDeviceKind.values},
+            ),
+            // #docregion list-view
+            child: ListView(
+              scrollDirection: Axis.horizontal,
+              children: [
+                for (final color in Colors.primaries)
+                  Container(width: 160, color: color),
+              ],
+            ),
+            // #enddocregion list-view
           ),
-          // #enddocregion ListView
         ),
       ),
     );

src/content/cookbook/lists/horizontal-list.md

@@ -15,35 +15,25 @@ The [`ListView`][] widget supports horizontal lists.
 Use the standard `ListView` constructor, passing in a horizontal
 `scrollDirection`, which overrides the default vertical direction.
 
-<?code-excerpt "lib/main.dart (ListView)" replace="/^child\: //g"?>
-```dart
+<?code-excerpt "lib/main.dart (list-view)" replace="/^child\: //g"?>
+```dart highlightLines=2
 ListView(
-  // This next line does the trick.
   scrollDirection: Axis.horizontal,
-  children: <Widget>[
-    Container(width: 160, color: Colors.red),
-    Container(width: 160, color: Colors.blue),
-    Container(width: 160, color: Colors.green),
-    Container(width: 160, color: Colors.yellow),
-    Container(width: 160, color: Colors.orange),
+  children: [
+    for (final color in Colors.primaries)
+      Container(width: 160, color: color),
   ],
 ),
 ```
 
-## Interactive example
-
-:::note Desktop and web note
-This example works in the browser and on the desktop.
-However, as this list scrolls on the horizontal axis
-(left to right or right to left),
-hold <kbd>Shift</kbd> while using the mouse scroll wheel to scroll the list.
+[`ListView`]: {{site.api}}/flutter/widgets/ListView-class.html
 
-To learn more, read the [breaking change][] page on the
-default drag for scrolling devices.
-:::
+## Interactive example
 
 <?code-excerpt "lib/main.dart"?>
 ```dartpad title="Flutter horizontal list hands-on example in DartPad" run="true"
+import 'dart:ui';
+
 import 'package:flutter/material.dart';
 
 void main() => runApp(const MyApp());
@@ -53,7 +43,7 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const title = 'Horizontal List';
+    const title = 'Horizontal list';
 
     return MaterialApp(
       title: title,
@@ -62,16 +52,19 @@ class MyApp extends StatelessWidget {
         body: Container(
           margin: const EdgeInsets.symmetric(vertical: 20),
           height: 200,
-          child: ListView(
-            // This next line does the trick.
-            scrollDirection: Axis.horizontal,
-            children: <Widget>[
-              Container(width: 160, color: Colors.red),
-              Container(width: 160, color: Colors.blue),
-              Container(width: 160, color: Colors.green),
-              Container(width: 160, color: Colors.yellow),
-              Container(width: 160, color: Colors.orange),
-            ],
+          child: ScrollConfiguration(
+            // Add a custom scroll behavior that
+            // allows all devices to drag the list.
+            behavior: const MaterialScrollBehavior().copyWith(
+              dragDevices: {...PointerDeviceKind.values},
+            ),
+            child: ListView(
+              scrollDirection: Axis.horizontal,
+              children: [
+                for (final color in Colors.primaries)
+                  Container(width: 160, color: color),
+              ],
+            ),
           ),
         ),
       ),
@@ -83,6 +76,3 @@ class MyApp extends StatelessWidget {
 <noscript>
   <img src="/assets/images/docs/cookbook/horizontal-list.webp" alt="Horizontal List Demo" class="site-mobile-screenshot" />
 </noscript>
-
-[breaking change]: /release/breaking-changes/default-scroll-behavior-drag
-[`ListView`]: {{site.api}}/flutter/widgets/ListView-class.html