`CupertinoSliverNavigationBar`: Add example (#99384)

Part of #72926

examples/api/lib/cupertino/nav_bar/cupertino_sliver_nav_bar.0.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Flutter code sample for CupertinoSliverNavigationBar
+
+import 'package:flutter/cupertino.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  static const String _title = 'CupertinoSliverNavigationBar Sample';
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoApp(
+      title: _title,
+      home: CupertinoNavBarSample(),
+    );
+  }
+}
+
+class CupertinoNavBarSample extends StatelessWidget {
+  const CupertinoNavBarSample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      // A ScrollView that creates custom scroll effects using slivers.
+      child: CustomScrollView(
+        // A list of sliver widgets.
+        slivers: <Widget>[
+          const CupertinoSliverNavigationBar(
+            leading: Icon(CupertinoIcons.person_2),
+            // This title is visible in both collapsed and expanded states.
+            // When the "middle" parameter is omitted, the widget provided
+            // in the "largeTitle" parameter is used instead in the collapsed state.
+            largeTitle: Text('Contacts'),
+            trailing: Icon(CupertinoIcons.add_circled),
+          ),
+          // This widget fills the remaining space in the viewport.
+          // Drag the scrollable area to collapse the CupertinoSliverNavigationBar.
+          SliverFillRemaining(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: <Widget>[
+                const Text('Drag me up', textAlign: TextAlign.center),
+                CupertinoButton.filled(
+                  onPressed: () {
+                    Navigator.push(context, CupertinoPageRoute<Widget>(builder: (BuildContext context) {
+                      return const NextPage();
+                    }));
+                  },
+                  child: const Text('Go to Next Page'),
+                )
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class NextPage extends StatelessWidget {
+  const NextPage({ Key? key }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final Brightness brightness = CupertinoTheme.brightnessOf(context);
+    return  CupertinoPageScaffold(
+      child: CustomScrollView(
+        slivers: <Widget>[
+          CupertinoSliverNavigationBar(
+            backgroundColor: CupertinoColors.systemYellow,
+            border: Border(
+              bottom: BorderSide(
+                color: brightness == Brightness.light
+                  ? CupertinoColors.black
+                  : CupertinoColors.white,
+              ),
+            ),
+            // The middle widget is visible in both collapsed and expanded states.
+            middle: const Text('Contacts Group'),
+            // When the "middle" parameter is implemented, the larget title is only visible
+            // when the CupertinoSliverNavigationBar is fully expanded.
+            largeTitle: const Text('Family'),
+          ),
+          SliverFillRemaining(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              children: const <Widget>[
+                Text('Drag me up', textAlign: TextAlign.center),
+                // When the "leading" parameter is omitted on a route that has a previous page,
+                // the back button is automatically added to the leading position.
+                Text('Tap on the leading button to navigate back', textAlign: TextAlign.center),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

examples/api/test/cupertino/nav_bar/cupertino_sliver_nav_bar.0_test.dart

+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_api_samples/cupertino/nav_bar/cupertino_sliver_nav_bar.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+const Offset dragUp = Offset(0.0, -150.0);
+
+void main() {
+   testWidgets('Collapse and expand CupertinoSliverNavigationBar changes title position', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.MyApp(),
+    );
+
+    // Large title is visible and at lower position.
+    expect(tester.getBottomLeft(find.text('Contacts').first).dy, 88.0);
+    await tester.fling(find.text('Drag me up'), dragUp, 500.0);
+    await tester.pumpAndSettle();
+
+    // Large title is hidden and at higher position.
+    expect(tester.getBottomLeft(find.text('Contacts').first).dy, 36.0);
+  });
+
+   testWidgets('Middle widget is visible in both collapsed and expanded states', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.MyApp(),
+    );
+
+    // Navigate to a page that has both middle and large titles.
+    final Finder nextButton = find.text('Go to Next Page');
+    expect(nextButton, findsOneWidget);
+    await tester.tap(nextButton);
+    await tester.pumpAndSettle();
+
+    // Both middle and large titles are visible.
+    expect(tester.getBottomLeft(find.text('Contacts Group').first).dy, 30.5);
+    expect(tester.getBottomLeft(find.text('Family').first).dy, 88.0);
+
+    await tester.fling(find.text('Drag me up'), dragUp, 500.0);
+    await tester.pumpAndSettle();
+
+    // Large title is hidden and middle title is visible.
+    expect(tester.getBottomLeft(find.text('Contacts Group').first).dy, 30.5);
+    expect(tester.getBottomLeft(find.text('Family').first).dy, 36.0);
+  });
+
+   testWidgets('CupertinoSliverNavigationBar with previous route has back button', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.MyApp(),
+    );
+
+    // Navigate to a page that has back button
+    final Finder nextButton = find.text('Go to Next Page');
+    expect(nextButton, findsOneWidget);
+    await tester.tap(nextButton);
+    await tester.pumpAndSettle();
+    expect(nextButton, findsNothing);
+
+    // Go back to the previous page.
+    final Finder backButton = find.byType(CupertinoButton);
+    expect(backButton, findsOneWidget);
+    await tester.tap(backButton);
+    await tester.pumpAndSettle();
+    expect(nextButton, findsOneWidget);
+  });
+}

packages/flutter/lib/src/cupertino/nav_bar.dart

@@ -564,10 +564,17 @@ class _CupertinoNavigationBarState extends State<CupertinoNavigationBar> {
 /// user scrolls, but it will also stretch when the user over-scrolls if the
 /// [stretch] value is `true`. Defaults to `false`.
 ///
+/// {@tool dartpad}
+/// This example shows [CupertinoSliverNavigationBar] in action inside a [CustomScrollView].
+///
+/// ** See code in examples/api/lib/cupertino/nav_bar/cupertino_sliver_nav_bar.0.dart **
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [CupertinoNavigationBar], an iOS navigation bar for use on non-scrolling
 ///    pages.
+///  * [CustomScrollView], a ScrollView that creates custom scroll effects using slivers.
 class CupertinoSliverNavigationBar extends StatefulWidget {
   /// Creates a navigation bar for scrolling lists.
   ///