Add cupertino examples to the Floating App Bar recipe. (#11821)

_Description of what this PR is changing or adding, and why:_

- Added code sample for a Cupertino floating navigation bar (thanks
@loic-sharma!)
- Added Cupertino code excerpts.
- Updated the Material code example to pin the app bar, but in a
minimized style (matches Cupertino example and looks nice, imo)
- Added tabs & moved Material and Cupertino specific content into tabs.
- In some cases, I reduced text in the intro section to be style
agnostic.
- Moved some content into an Overview so that we can easily get to that
content through the right-pane TOC.

Note: It's not easy to tell when content belongs to a tab. We might
consider adding some shading back to our tabs. Just a thought for the
future.

_Issues fixed by this PR (if any):_

_PRs or commits this PR depends on (if any):_

## Presubmit checklist

- [x] This PR is marked as draft with an explanation if not meant to
land until a future stable release.
- [x] This PR doesn’t contain automatically generated corrections
(Grammarly or similar).
- [x] This PR follows the [Google Developer Documentation Style
Guidelines](https://developers.google.com/style) — for example, it
doesn’t use _i.e._ or _e.g._, and it avoids _I_ and _we_ (first person).
- [x] This PR uses [semantic line
breaks](https://github.com/dart-lang/site-shared/blob/main/doc/writing-for-dart-and-flutter-websites.md#semantic-line-breaks)
of 80 characters or fewer.

Author: antfitch

examples/cookbook/lists/floating_app_bar/lib/main_cupertino.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/cupertino.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    const title = 'Floating Navigation Bar';
+
+    return CupertinoApp(
+      title: title,
+      home: CupertinoPageScaffold(
+        // No navigation bar provided to CupertinoPageScaffold,
+        // only a body with a CustomScrollView.
+        child: CustomScrollView(
+          slivers: [
+            // Add the navigation bar to the CustomScrollView.
+            const CupertinoSliverNavigationBar(
+              // Provide a standard title.
+              largeTitle: Text(title),
+            ),
+            // #docregion SliverList
+            // Next, create a SliverList
+            SliverList.builder(
+              // The builder function returns a CupertinoListTile with a title
+              // that displays the index of the current item.
+              itemBuilder:
+                  (context, index) =>
+                      CupertinoListTile(title: Text('Item #$index')),
+              // Builds 50 CupertinoListTile
+              itemCount: 50,
+            ),
+            // #enddocregion SliverList
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/cookbook/lists/floating_app_bar/lib/main.dart examples/cookbook/lists/floating_app_bar/lib/main_material.dart

@@ -12,33 +12,30 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: title,
       home: Scaffold(
-        // No appbar provided to the Scaffold, only a body with a
+        // No app bar provided to Scaffold, only a body with a
         // CustomScrollView.
         body: CustomScrollView(
           slivers: [
             // Add the app bar to the CustomScrollView.
             const SliverAppBar(
               // Provide a standard title.
               title: Text(title),
-              // Allows the user to reveal the app bar if they begin scrolling
-              // back up the list of items.
-              floating: true,
+              // Pin the app bar when scrolling
+              pinned: true,
               // Display a placeholder widget to visualize the shrinking size.
               flexibleSpace: Placeholder(),
               // Make the initial height of the SliverAppBar larger than normal.
               expandedHeight: 200,
             ),
             // #docregion SliverList
             // Next, create a SliverList
-            SliverList(
-              // Use a delegate to build items as they're scrolled on screen.
-              delegate: SliverChildBuilderDelegate(
-                // The builder function returns a ListTile with a title that
-                // displays the index of the current item.
-                (context, index) => ListTile(title: Text('Item #$index')),
-                // Builds 1000 ListTiles
-                childCount: 1000,
-              ),
+            SliverList.builder(
+              // The builder function returns a ListTile with a title that
+              // displays the index of the current item.
+              itemBuilder:
+                  (context, index) => ListTile(title: Text('Item #$index')),
+              // Builds 50 ListTiles
+              itemCount: 50,
             ),
             // #enddocregion SliverList
           ],

examples/cookbook/lists/floating_app_bar/lib/starter.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/cupertino.dart';
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // #docregion CustomScrollView
+    return const CupertinoApp(
+      title: 'Floating Navigation Bar',
+      home: CupertinoPageScaffold(
+        // No navigation bar property provided yet.
+        child: CustomScrollView(
+          // Add the navigation bar and list of items as slivers in the next steps.
+          slivers: <Widget>[],
+        ),
+      ),
+    );
+    // #enddocregion CustomScrollView
+  }
+}

examples/cookbook/lists/floating_app_bar/lib/starter_cupertino.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    // #docregion CustomScrollView
+    return const MaterialApp(
+      title: 'Floating App Bar',
+      home: Scaffold(
+        // No app bar property provided yet.
+        body: CustomScrollView(
+          // Add the app bar and list of items as slivers in the next steps.
+          slivers: <Widget>[],
+        ),
+      ),
+    );
+    // #enddocregion CustomScrollView
+  }
+}

examples/cookbook/lists/floating_app_bar/lib/starter_material.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/cupertino.dart';
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoApp(
+      title: 'Floating App Bar',
+      home: CupertinoPageScaffold(
+        // No navigation bar provided to CupertinoPageScaffold,
+        // only a body with a CustomScrollView.
+        child: CustomScrollView(
+          // #docregion SliverAppBar
+          slivers: [
+            // Add the navigation bar to the CustomScrollView.
+            CupertinoSliverNavigationBar(
+              // Provide a standard title.
+              largeTitle: Text('Floating App Bar'),
+            ),
+          ],
+          // #enddocregion SliverAppBar
+        ),
+      ),
+    );
+  }
+}

examples/cookbook/lists/floating_app_bar/lib/step2_cupertino.dart

@@ -7,31 +7,28 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    const title = 'Floating App Bar';
-
     return const MaterialApp(
-      title: title,
+      title: 'Floating App Bar',
       home: Scaffold(
         // No appbar provided to the Scaffold, only a body with a
         // CustomScrollView.
-        // #docregion SliverAppBar
         body: CustomScrollView(
+          // #docregion SliverAppBar
           slivers: [
             // Add the app bar to the CustomScrollView.
             SliverAppBar(
               // Provide a standard title.
-              title: Text(title),
-              // Allows the user to reveal the app bar if they begin scrolling
-              // back up the list of items.
-              floating: true,
+              title: Text('Floating App Bar'),
+              // Pin the app bar when scrolling.
+              pinned: true,
               // Display a placeholder widget to visualize the shrinking size.
               flexibleSpace: Placeholder(),
               // Make the initial height of the SliverAppBar larger than normal.
               expandedHeight: 200,
             ),
           ],
+          // #enddocregion SliverAppBar
         ),
-        // #enddocregion SliverAppBar
       ),
     );
   }