Cupertino gallery app (#2715)

Resolves #2519 

Part of the larger effort to bring the samples/repo into a stable and
maintainable condition that _also_ remains useful. See: #2409

## Pre-launch Checklist

- [x] I read the [Flutter Style Guide] _recently_, and have followed its
advice.
- [x] I signed the [CLA].
- [x] I read the [Contributors Guide].
- [x] I have added sample code updates to the [changelog].
- [x] I updated/added relevant documentation (doc comments with `///`).

cupertino_gallery/lib/gallery_home.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/cupertino.dart';
+import 'settings_page.dart';
+import 'widgets_page.dart';
+
+class GalleryHome extends StatelessWidget {
+  const GalleryHome({
+    super.key,
+    required this.onThemeChange,
+    required this.isDarkMode,
+    required this.onTextSizeChange,
+    required this.textSize,
+  });
+
+  final ValueChanged<bool> onThemeChange;
+  final bool isDarkMode;
+  final ValueChanged<double> onTextSizeChange;
+  final double textSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoTabScaffold(
+      tabBar: CupertinoTabBar(
+        items: const <BottomNavigationBarItem>[
+          BottomNavigationBarItem(
+            icon: Icon(CupertinoIcons.list_bullet),
+            label: 'Widgets',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(CupertinoIcons.settings),
+            label: 'Settings',
+          ),
+        ],
+      ),
+      tabBuilder: (BuildContext context, int index) {
+        return CupertinoTabView(
+          builder: (BuildContext context) {
+            return switch (index) {
+              0 => const WidgetsPage(),
+              1 => SettingsPage(
+                    onThemeChange: onThemeChange,
+                    isDarkMode: isDarkMode,
+                    onTextSizeChange: onTextSizeChange,
+                    textSize: textSize,
+                  ),
+              _ => const Center(child: Text('Widgets')),
+            };
+          },
+        );
+      },
+    );
+  }
+}

cupertino_gallery/lib/main.dart

@@ -0,0 +1,72 @@
+// Copyright 2022 The Flutter team. 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/material.dart';
+
+import 'gallery_home.dart';
+
+void main() {
+  runApp(const CupertinoGalleryApp());
+}
+
+class CupertinoGalleryApp extends StatefulWidget {
+  const CupertinoGalleryApp({super.key});
+
+  @override
+  State<CupertinoGalleryApp> createState() => _CupertinoGalleryAppState();
+}
+
+class _CupertinoGalleryAppState extends State<CupertinoGalleryApp> {
+  ThemeMode _themeMode = ThemeMode.system;
+  double _textSize = 1.0;
+
+  void _handleThemeChange(bool isDarkMode) {
+    setState(() {
+      _themeMode = isDarkMode ? ThemeMode.dark : ThemeMode.light;
+    });
+  }
+
+  void _handleTextSizeChange(double newTextSize) {
+    setState(() {
+      _textSize = newTextSize;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final baseTheme = CupertinoThemeData(
+      brightness:
+          _themeMode == ThemeMode.dark ? Brightness.dark : Brightness.light,
+    );
+    final textTheme = baseTheme.textTheme.copyWith(
+      textStyle:
+          baseTheme.textTheme.textStyle.copyWith(fontSize: 14 * _textSize),
+      actionTextStyle: baseTheme.textTheme.actionTextStyle
+          .copyWith(fontSize: 14 * _textSize),
+      tabLabelTextStyle: baseTheme.textTheme.tabLabelTextStyle
+          .copyWith(fontSize: 10 * _textSize),
+      navTitleTextStyle: baseTheme.textTheme.navTitleTextStyle
+          .copyWith(fontSize: 17 * _textSize),
+      navLargeTitleTextStyle: baseTheme.textTheme.navLargeTitleTextStyle
+          .copyWith(fontSize: 34 * _textSize),
+      navActionTextStyle: baseTheme.textTheme.navActionTextStyle
+          .copyWith(fontSize: 17 * _textSize),
+      pickerTextStyle: baseTheme.textTheme.pickerTextStyle
+          .copyWith(fontSize: 21 * _textSize),
+      dateTimePickerTextStyle: baseTheme.textTheme.dateTimePickerTextStyle
+          .copyWith(fontSize: 21 * _textSize),
+    );
+    return CupertinoApp(
+      title: 'Cupertino Gallery',
+      theme: baseTheme.copyWith(textTheme: textTheme),
+      home: GalleryHome(
+        onThemeChange: _handleThemeChange,
+        isDarkMode: _themeMode == ThemeMode.dark,
+        onTextSizeChange: _handleTextSizeChange,
+        textSize: _textSize,
+      ),
+    );
+  }
+}

cupertino_gallery/lib/settings_page.dart

@@ -0,0 +1,143 @@
+import 'package:flutter/cupertino.dart';
+
+class SettingsPage extends StatefulWidget {
+  const SettingsPage({
+    super.key,
+    required this.onThemeChange,
+    required this.isDarkMode,
+    required this.onTextSizeChange,
+    required this.textSize,
+  });
+
+  final ValueChanged<bool> onThemeChange;
+  final bool isDarkMode;
+  final ValueChanged<double> onTextSizeChange;
+  final double textSize;
+
+  @override
+  State<SettingsPage> createState() => _SettingsPageState();
+}
+
+class _SettingsPageState extends State<SettingsPage> {
+  late bool isDarkMode;
+  late double _textSize;
+
+  @override
+  void initState() {
+    super.initState();
+    isDarkMode = widget.isDarkMode;
+    _textSize = widget.textSize;
+  }
+
+  @override
+  void didUpdateWidget(SettingsPage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.isDarkMode != oldWidget.isDarkMode) {
+      isDarkMode = widget.isDarkMode;
+    }
+    if (widget.textSize != oldWidget.textSize) {
+      _textSize = widget.textSize;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('Settings')),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          CupertinoListSection(
+            header: const Text('Appearance'),
+            children: [
+              CupertinoListTile(
+                title: const Text('Dark Mode'),
+                trailing: CupertinoSwitch(
+                  value: isDarkMode,
+                  onChanged: (bool isActive) {
+                    setState(() {
+                      isDarkMode = isActive;
+                      widget.onThemeChange(isActive);
+                    });
+                  },
+                ),
+              ),
+              CupertinoListTile(
+                title: const Text('Text Size'),
+                trailing: Text('${(_textSize * 100).toStringAsFixed(0)}%'),
+              ),
+              CupertinoSlider(
+                value: _textSize,
+                min: 0.5,
+                max: 1.5,
+                onChanged: (double value) {
+                  setState(() {
+                    _textSize = value;
+                  });
+                  widget.onTextSizeChange(value);
+                },
+              ),
+            ],
+          ),
+          CupertinoListSection(
+            header: const Text('General'),
+            children: [
+              CupertinoListTile(
+                title: const Text('About'),
+                trailing: const Icon(CupertinoIcons.forward),
+                onTap: () {},
+              ),
+              CupertinoListTile(
+                title: const Text('Privacy'),
+                trailing: const Icon(CupertinoIcons.forward),
+                onTap: () {},
+              ),
+              CupertinoListTile(
+                title: const Text('Help'),
+                trailing: const Icon(CupertinoIcons.forward),
+                onTap: () {},
+              ),
+              CupertinoListTile(
+                title: const Text('Reset Settings'),
+                trailing: const Icon(CupertinoIcons.forward),
+                onTap: () {
+                  showCupertinoDialog<void>(
+                    context: context,
+                    builder: (BuildContext context) => CupertinoAlertDialog(
+                      title: const Text('Reset Settings'),
+                      content: const Text(
+                        'Are you sure you want to reset all settings?',
+                      ),
+                      actions: <CupertinoDialogAction>[
+                        CupertinoDialogAction(
+                          child: const Text('Cancel'),
+                          onPressed: () {
+                            Navigator.pop(context);
+                          },
+                        ),
+                        CupertinoDialogAction(
+                          isDestructiveAction: true,
+                          child: const Text('Reset'),
+                          onPressed: () {
+                            setState(() {
+                              isDarkMode = false;
+                              _textSize = 1.0;
+                              widget.onThemeChange(false);
+                              widget.onTextSizeChange(1.0);
+                            });
+                            Navigator.pop(context);
+                          },
+                        ),
+                      ],
+                    ),
+                  );
+                },
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+

cupertino_gallery/lib/widget_detail_page.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/cupertino.dart';
+
+import 'widgets/action_sheet_page.dart';
+import 'widgets/activity_indicator_page.dart';
+import 'widgets/alert_dialog_page.dart';
+import 'widgets/button_page.dart';
+import 'widgets/checkbox_page.dart';
+import 'widgets/context_menu_page.dart';
+import 'widgets/date_picker_page.dart';
+import 'widgets/list_tile_page.dart';
+import 'widgets/picker_page.dart';
+import 'widgets/popup_surface_page.dart';
+import 'widgets/radio_page.dart';
+import 'widgets/scrollbar_page.dart';
+import 'widgets/search_text_field_page.dart';
+import 'widgets/segmented_control_page.dart';
+import 'widgets/sheet_page.dart';
+import 'widgets/slider_page.dart';
+import 'widgets/sliding_segmented_control_page.dart';
+import 'widgets/switch_page.dart';
+import 'widgets/text_field_page.dart';
+import 'widgets/text_theme_page.dart';
+import 'widgets/time_picker_page.dart';
+
+class WidgetDetailPage extends StatelessWidget {
+  const WidgetDetailPage({super.key, required this.title});
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    switch (title) {
+      case 'Action Sheet':
+        return const ActionSheetPage();
+      case 'Activity Indicator':
+        return const ActivityIndicatorPage();
+      case 'Alert Dialog':
+        return const AlertDialogPage();
+      case 'Button':
+        return const ButtonPage();
+      case 'Checkbox':
+        return const CheckboxPage();
+      case 'Context Menu':
+        return const ContextMenuPage();
+      case 'Date Picker':
+        return const DatePickerPage();
+      case 'List Tile':
+        return const ListTilePage();
+      case 'Picker':
+        return const PickerPage();
+      case 'Popup Surface':
+        return const PopupSurfacePage();
+      case 'Radio':
+        return const RadioPage();
+      case 'Scrollbar':
+        return const ScrollbarPage();
+      case 'Search Text Field':
+        return const SearchTextFieldPage();
+      case 'Segmented Control':
+        return const SegmentedControlPage();
+      case 'Sheet':
+        return const SheetPage();
+      case 'Slider':
+        return const SliderPage();
+      case 'Sliding Segmented Control':
+        return const SlidingSegmentedControlPage();
+      case 'Switch':
+        return const SwitchPage();
+      case 'Text Field':
+        return const TextFieldPage();
+      case 'Text Theme':
+        return const TextThemePage();
+      case 'Time Picker':
+        return const TimePickerPage();
+      default:
+        return const CupertinoPageScaffold(
+          navigationBar: CupertinoNavigationBar(
+            middle: Text('Widget Not Found'),
+          ),
+          child: Center(child: Text('Widget Not Found')),
+        );
+    }
+  }
+}

cupertino_gallery/lib/widgets/action_sheet_page.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/cupertino.dart';
+
+class ActionSheetPage extends StatelessWidget {
+  const ActionSheetPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Action Sheet'),
+      ),
+      child: Center(
+        child: CupertinoButton(
+          child: const Text('Show Action Sheet'),
+          onPressed: () {
+            showCupertinoModalPopup<void>(
+              context: context,
+              builder: (BuildContext context) => CupertinoActionSheet(
+                title: const Text('Title'),
+                message: const Text('Message'),
+                actions: <CupertinoActionSheetAction>[
+                  CupertinoActionSheetAction(
+                    child: const Text('Action One'),
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                  CupertinoActionSheetAction(
+                    child: const Text('Action Two'),
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  )
+                ],
+                cancelButton: CupertinoActionSheetAction(
+                  isDefaultAction: true,
+                  onPressed: () {
+                    Navigator.pop(context);
+                  },
+                  child: const Text('Cancel'),
+                ),
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/activity_indicator_page.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/cupertino.dart';
+
+class ActivityIndicatorPage extends StatelessWidget {
+  const ActivityIndicatorPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoPageScaffold(
+      navigationBar: CupertinoNavigationBar(
+        middle: Text('Activity Indicator'),
+      ),
+      child: Center(
+        child: CupertinoActivityIndicator(),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/alert_dialog_page.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/cupertino.dart';
+
+class AlertDialogPage extends StatelessWidget {
+  const AlertDialogPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('Alert Dialog')),
+      child: Center(
+        child: CupertinoButton(
+          child: const Text('Show Alert Dialog'),
+          onPressed: () {
+            showCupertinoDialog<void>(
+              context: context,
+              builder: (BuildContext context) => CupertinoAlertDialog(
+                title: const Text('Alert'),
+                content: const Text('This is a sample alert dialog.'),
+                actions: <CupertinoDialogAction>[
+                  CupertinoDialogAction(
+                    child: const Text('OK'),
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                  CupertinoDialogAction(
+                    isDefaultAction: true,
+                    child: const Text('NO'),
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                ],
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/button_page.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/cupertino.dart';
+
+class ButtonPage extends StatelessWidget {
+  const ButtonPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('Button')),
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Text(
+              'CupertinoButton widget',
+              style: CupertinoTheme.of(context).textTheme.textStyle,
+            ),
+            const SizedBox(height: 16),
+            CupertinoButton(child: const Text('Enabled'), onPressed: () {}),
+            const SizedBox(height: 16),
+            const CupertinoButton(onPressed: null, child: Text('Disabled')),
+            const SizedBox(height: 32),
+            Text(
+              'CupertinoButton.filled widget',
+              style: CupertinoTheme.of(context).textTheme.textStyle,
+            ),
+            const SizedBox(height: 16),
+            CupertinoButton.filled(
+              child: const Text('Enabled'),
+              onPressed: () {},
+            ),
+            const SizedBox(height: 16),
+            const CupertinoButton.filled(
+              onPressed: null,
+              child: Text('Disabled'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/checkbox_page.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/cupertino.dart';
+
+class CheckboxPage extends StatefulWidget {
+  const CheckboxPage({super.key});
+
+  @override
+  State<CheckboxPage> createState() => _CheckboxPageState();
+}
+
+class _CheckboxPageState extends State<CheckboxPage> {
+  bool _value = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Checkbox'),
+      ),
+      child: Center(
+        child: CupertinoCheckbox(
+          value: _value,
+          onChanged: (bool? value) {
+            setState(() {
+              _value = value!;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/context_menu_page.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/cupertino.dart';
+
+class ContextMenuPage extends StatelessWidget {
+  const ContextMenuPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('Context Menu')),
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text('Long press to activate context menu:'),
+            SizedBox(height: 16),
+            SizedBox(
+              width: 100,
+              height: 100,
+              child: CupertinoContextMenu(
+                actions: <Widget>[
+                  CupertinoContextMenuAction(
+                    child: const Text('Action one'),
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                  CupertinoContextMenuAction(
+                    child: const Text('Action two'),
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                ],
+                child: Container(color: CupertinoColors.activeBlue),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/date_picker_page.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/cupertino.dart';
+
+class DatePickerPage extends StatelessWidget {
+  const DatePickerPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Date Picker'),
+      ),
+      child: Center(
+        child: SizedBox(
+          height: 200,
+          child: CupertinoDatePicker(
+            onDateTimeChanged: (DateTime newDate) {},
+          ),
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/list_tile_page.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/cupertino.dart';
+
+class ListTilePage extends StatelessWidget {
+  const ListTilePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('List Tile')),
+      child: Center(
+        child: ListView(
+          children: [
+            CupertinoListSection.insetGrouped(
+              children: [
+                CupertinoListTile(
+                  title: Text('Title'),
+                  subtitle: Text('Subtitle'),
+                  leading: Icon(CupertinoIcons.info),
+                  trailing: Icon(CupertinoIcons.forward),
+                ),
+                CupertinoListTile(
+                  title: Text('Title'),
+                  subtitle: Text('Subtitle'),
+                  leading: Icon(CupertinoIcons.person),
+                  trailing: Icon(CupertinoIcons.forward),
+                ),
+                CupertinoListTile(
+                  title: Text('Title'),
+                  subtitle: Text('Subtitle'),
+                  leading: Icon(CupertinoIcons.wifi),
+                  trailing: Icon(CupertinoIcons.forward),
+                ),
+              ],
+            ),
+            CupertinoListSection(
+              children: [
+                CupertinoListTile(
+                  title: Text('Title'),
+                  subtitle: Text('Subtitle'),
+                  leading: Icon(CupertinoIcons.search),
+                  trailing: Icon(CupertinoIcons.forward),
+                ),
+                CupertinoListTile(
+                  title: Text('Title'),
+                  subtitle: Text('Subtitle'),
+                  leading: Icon(CupertinoIcons.heart_fill),
+                  trailing: Icon(CupertinoIcons.forward),
+                ),
+                CupertinoListTile(
+                  title: Text('Title'),
+                  subtitle: Text('Subtitle'),
+                  leading: Icon(CupertinoIcons.ant),
+                  trailing: Icon(CupertinoIcons.forward),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/picker_page.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/cupertino.dart';
+
+class PickerPage extends StatelessWidget {
+  const PickerPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Picker'),
+      ),
+      child: Center(
+        child: SizedBox(
+          height: 200,
+          child: CupertinoPicker(
+            itemExtent: 32,
+            onSelectedItemChanged: (int index) {},
+            children: const <Widget>[
+              Text('One'),
+              Text('Two'),
+              Text('Three'),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/popup_surface_page.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/cupertino.dart';
+
+class PopupSurfacePage extends StatelessWidget {
+  const PopupSurfacePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Popup Surface'),
+      ),
+      child: Center(
+        child: CupertinoButton(
+          child: const Text('Show Popup Surface'),
+          onPressed: () {
+            showCupertinoModalPopup<void>(
+              context: context,
+              builder: (BuildContext context) {
+                return CupertinoPopupSurface(
+                  child: Container(
+                    color: CupertinoColors.white,
+                    width: 200,
+                    height: 200,
+                    child: const Center(
+                      child: Text('This is a popup surface.'),
+                    ),
+                  ),
+                );
+              },
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/radio_page.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/cupertino.dart';
+
+class RadioPage extends StatefulWidget {
+  const RadioPage({super.key});
+
+  @override
+  State<RadioPage> createState() => _RadioPageState();
+}
+
+class _RadioPageState extends State<RadioPage> {
+  int _selectedValue = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('Radio')),
+      child: Center(
+        child: RadioGroup(
+          groupValue: _selectedValue,
+          onChanged: (int? value) {
+            setState(() {
+              _selectedValue = value!;
+            });
+          },
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              CupertinoListTile(
+                title: const Text('Option 1'),
+                leading: CupertinoRadio<int>(value: 0),
+              ),
+              CupertinoListTile(
+                title: const Text('Option 2'),
+                leading: CupertinoRadio<int>(value: 1),
+              ),
+              CupertinoListTile(
+                title: const Text('Option 3'),
+                leading: CupertinoRadio<int>(value: 2),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/scrollbar_page.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/cupertino.dart';
+
+class ScrollbarPage extends StatelessWidget {
+  const ScrollbarPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final ScrollController controller = ScrollController();
+    return CupertinoPageScaffold(
+      navigationBar: CupertinoNavigationBar(middle: Text('Scrollbar')),
+      child: CupertinoScrollbar(
+        controller: controller,
+        child: ListView.separated(
+          controller: controller,
+          itemCount: 100,
+          itemBuilder: (BuildContext context, int index) {
+            return CupertinoListTile(title: Text('Item $index'));
+          },
+          separatorBuilder: (BuildContext context, int index) {
+            return Container(height: 1, color: CupertinoColors.opaqueSeparator);
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/search_text_field_page.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/cupertino.dart';
+
+class SearchTextFieldPage extends StatelessWidget {
+  const SearchTextFieldPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoPageScaffold(
+      navigationBar: CupertinoNavigationBar(
+        middle: Text('Search Text Field'),
+      ),
+      child: Center(
+        child: Padding(
+          padding: EdgeInsets.all(16.0),
+          child: CupertinoSearchTextField(),
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/segmented_control_page.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/cupertino.dart';
+
+class SegmentedControlPage extends StatefulWidget {
+  const SegmentedControlPage({super.key});
+
+  @override
+  State<SegmentedControlPage> createState() => _SegmentedControlPageState();
+}
+
+class _SegmentedControlPageState extends State<SegmentedControlPage> {
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Segmented Control'),
+      ),
+      child: Center(
+        child: CupertinoSegmentedControl<int>(
+          children: <int, Widget>{
+            0: Text('One'),
+            1: Text('Two'),
+            2: Text('Three'),
+          },
+          onValueChanged: (int val) {
+            setState(() {
+              _selectedIndex = val;
+            });
+          },
+          groupValue: _selectedIndex,
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/sheet_page.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/cupertino.dart';
+
+class SheetPage extends StatelessWidget {
+  const SheetPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(middle: Text('Sheet')),
+      child: Center(
+        child: CupertinoButton.filled(
+          child: const Text('Show Sheet'),
+          onPressed: () {
+            Navigator.of(context).push(
+              CupertinoSheetRoute<void>(
+                builder: (BuildContext context) {
+                  return CupertinoPageScaffold(
+                    navigationBar: CupertinoNavigationBar(
+                      middle: const Text('Sheet'),
+                      trailing: GestureDetector(
+                        child: const Icon(CupertinoIcons.xmark),
+                        onTap: () {
+                          Navigator.of(context).pop();
+                        },
+                      ),
+                    ),
+                    child: const Center(
+                      child: Text('This is a sheet'),
+                    ),
+                  );
+                },
+              ),
+            );
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/slider_page.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/cupertino.dart';
+
+class SliderPage extends StatefulWidget {
+  const SliderPage({super.key});
+
+  @override
+  State<SliderPage> createState() => _SliderPageState();
+}
+
+class _SliderPageState extends State<SliderPage> {
+  double _value = 0.5;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Slider'),
+      ),
+      child: Center(
+        child: CupertinoSlider(
+          value: _value,
+          onChanged: (double value) {
+            setState(() {
+              _value = value;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/sliding_segmented_control_page.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/cupertino.dart';
+
+class SlidingSegmentedControlPage extends StatefulWidget {
+  const SlidingSegmentedControlPage({super.key});
+
+  @override
+  State<SlidingSegmentedControlPage> createState() =>
+      _SlidingSegmentedControlPageState();
+}
+
+class _SlidingSegmentedControlPageState
+    extends State<SlidingSegmentedControlPage> {
+  int? _groupValue = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Sliding Segmented Control'),
+      ),
+      child: Center(
+        child: CupertinoSlidingSegmentedControl<int>(
+          children: const <int, Widget>{
+            0: Text('One'),
+            1: Text('Two'),
+            2: Text('Three'),
+          },
+          onValueChanged: (int? value) {
+            setState(() {
+              _groupValue = value;
+            });
+          },
+          groupValue: _groupValue,
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/switch_page.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/cupertino.dart';
+
+class SwitchPage extends StatefulWidget {
+  const SwitchPage({super.key});
+
+  @override
+  State<SwitchPage> createState() => _SwitchPageState();
+}
+
+class _SwitchPageState extends State<SwitchPage> {
+  bool _value = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Switch'),
+      ),
+      child: Center(
+        child: CupertinoSwitch(
+          value: _value,
+          onChanged: (bool value) {
+            setState(() {
+              _value = value;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/text_field_page.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/cupertino.dart';
+
+class TextFieldPage extends StatelessWidget {
+  const TextFieldPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoPageScaffold(
+      navigationBar: CupertinoNavigationBar(
+        middle: Text('Text Field'),
+      ),
+      child: Center(
+        child: Padding(
+          padding: EdgeInsets.all(16.0),
+          child: CupertinoTextField(
+            placeholder: 'Enter text',
+          ),
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/text_theme_page.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/cupertino.dart';
+
+class TextThemePage extends StatelessWidget {
+  const TextThemePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Text Theme'),
+      ),
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Text(
+              'This is the default text style',
+              style: CupertinoTheme.of(context).textTheme.textStyle,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'This is the action text style',
+              style: CupertinoTheme.of(context).textTheme.actionTextStyle,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'This is the tab label text style',
+              style: CupertinoTheme.of(context).textTheme.tabLabelTextStyle,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'This is the nav title text style',
+              style: CupertinoTheme.of(context).textTheme.navTitleTextStyle,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'This is the nav large title text style',
+              style: CupertinoTheme.of(context)
+                  .textTheme
+                  .navLargeTitleTextStyle,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'This is the picker text style',
+              style: CupertinoTheme.of(context).textTheme.pickerTextStyle,
+            ),
+            const SizedBox(height: 16),
+            Text(
+              'This is the date time picker text style',
+              style:
+                  CupertinoTheme.of(context).textTheme.dateTimePickerTextStyle,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets/time_picker_page.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/cupertino.dart';
+
+class TimePickerPage extends StatelessWidget {
+  const TimePickerPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('Time Picker'),
+      ),
+      child: Center(
+        child: SizedBox(
+          height: 200,
+          child: CupertinoTimerPicker(
+            onTimerDurationChanged: (Duration newDuration) {},
+          ),
+        ),
+      ),
+    );
+  }
+}

cupertino_gallery/lib/widgets_page.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/cupertino.dart';
+import 'widget_detail_page.dart';
+
+class WidgetsPage extends StatelessWidget {
+  const WidgetsPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      child: CustomScrollView(
+        slivers: <Widget>[
+          CupertinoSliverNavigationBar(largeTitle: Text('Cupertino Gallery')),
+          SliverFillRemaining(
+            child: ListView(
+              children: [
+                CustomCupertinoListTile(title: 'Action Sheet'),
+                CustomCupertinoListTile(title: 'Activity Indicator'),
+                CustomCupertinoListTile(title: 'Alert Dialog'),
+                CustomCupertinoListTile(title: 'Button'),
+                CustomCupertinoListTile(title: 'Checkbox'),
+                CustomCupertinoListTile(title: 'Context Menu'),
+                CustomCupertinoListTile(title: 'Date Picker'),
+                CustomCupertinoListTile(title: 'List Tile'),
+                CustomCupertinoListTile(title: 'Picker'),
+                CustomCupertinoListTile(title: 'Popup Surface'),
+                CustomCupertinoListTile(title: 'Radio'),
+                CustomCupertinoListTile(title: 'Scrollbar'),
+                CustomCupertinoListTile(title: 'Search Text Field'),
+                CustomCupertinoListTile(title: 'Segmented Control'),
+                CustomCupertinoListTile(title: 'Sheet'),
+                CustomCupertinoListTile(title: 'Slider'),
+                CustomCupertinoListTile(title: 'Sliding Segmented Control'),
+                CustomCupertinoListTile(title: 'Switch'),
+                CustomCupertinoListTile(title: 'Text Field'),
+                CustomCupertinoListTile(title: 'Text Theme'),
+                CustomCupertinoListTile(title: 'Time Picker'),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class CustomCupertinoListTile extends StatelessWidget {
+  const CustomCupertinoListTile({super.key, required this.title});
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        Navigator.of(context).push(
+          CupertinoPageRoute<void>(
+            builder: (BuildContext context) {
+              return WidgetDetailPage(title: title);
+            },
+          ),
+        );
+      },
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
+        decoration: const BoxDecoration(
+          border: Border(bottom: BorderSide(color: CupertinoColors.separator)),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: <Widget>[Text(title), const Icon(CupertinoIcons.forward)],
+        ),
+      ),
+    );
+  }
+}