Add code example for CustomScrollView on how to make it grow in two directions along its scroll axis (#57670)

packages/flutter/lib/src/widgets/scroll_view.dart

@@ -430,6 +430,74 @@ abstract class ScrollView extends StatelessWidget {
 /// ```
 /// {@end-tool}
 ///
+/// {@tool dartpad --template=stateful_widget_material}
+///
+/// By default, if items are inserted at the "top" of a scrolling container like
+/// [ListView] or [CustomScrollView], the top item and all of the items below it
+/// are scrolled downwards. In some applications, it's preferable to have the
+/// top of the list just grow upwards, without changing the scroll position.
+/// This example demonstrates how to do that with a [CustomScrollView] with
+/// two [SliverList] children, and the [CustomScrollView.center] set to the key
+/// of the bottom SliverList. The top one SliverList will grow upwards, and the
+/// bottom SliverList will grow downwards.
+///
+/// ```dart
+/// List<int> top = [];
+/// List<int> bottom = [0];
+///
+/// @override
+/// Widget build(BuildContext context) {
+///   const Key centerKey = ValueKey('bottom-sliver-list');
+///   return Scaffold(
+///     appBar: AppBar(
+///       title: const Text('Press on the plus to add items above and below'),
+///       leading: IconButton(
+///         icon: const Icon(Icons.add),
+///         onPressed: () {
+///           setState(() {
+///             top.add(-top.length - 1);
+///             bottom.add(bottom.length);
+///           });
+///         },
+///       ),
+///     ),
+///     body: CustomScrollView(
+///       center: centerKey,
+///       slivers: <Widget>[
+///         SliverList(
+///           delegate: SliverChildBuilderDelegate(
+///             (BuildContext context, int index) {
+///               return Container(
+///                 alignment: Alignment.center,
+///                 color: Colors.blue[200 + top[index] % 4 * 100],
+///                 height: 100 + top[index] % 4 * 20.0,
+///                 child: Text('Item: ${top[index]}'),
+///               );
+///             },
+///             childCount: top.length,
+///           ),
+///         ),
+///         SliverList(
+///           key: centerKey,
+///           delegate: SliverChildBuilderDelegate(
+///             (BuildContext context, int index) {
+///               return Container(
+///                 alignment: Alignment.center,
+///                 color: Colors.blue[200 + bottom[index] % 4 * 100],
+///                 height: 100 + bottom[index] % 4 * 20.0,
+///                 child: Text('Item: ${bottom[index]}'),
+///               );
+///             },
+///             childCount: bottom.length,
+///           ),
+///         ),
+///       ],
+///     ),
+///   );
+/// }
+/// ```
+/// {@end-tool}
+///
 /// ## Accessibility
 ///
 /// A [CustomScrollView] can allow Talkback/VoiceOver to make announcements