Add code example for CustomScrollView on how to make it grow in two directions...

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