Add CupertinoPicker interactive example (#93622)

examples/api/lib/cupertino/picker/cupertino_picker.0.dart

@@ -0,0 +1,117 @@
+// 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 CupertinoPicker
+
+import 'package:flutter/cupertino.dart';
+
+const double _kItemExtent = 32.0;
+const List<String> _fruitNames = <String>[
+  '🍎 Apple',
+  '🥭 Mango',
+  '🍌 Banana',
+  '🍊 Orange',
+  '🍍 Pineapple',
+  '🍓 Strawberry',
+];
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  static const String _title = 'Flutter Code Sample';
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoApp(
+      title: _title,
+      home: CupertinoPickerSample(),
+    );
+  }
+}
+
+class CupertinoPickerSample extends StatefulWidget {
+  const CupertinoPickerSample({Key? key}) : super(key: key);
+
+  @override
+  State<CupertinoPickerSample> createState() => _CupertinoPickerSampleState();
+}
+
+class _CupertinoPickerSampleState extends State<CupertinoPickerSample> {
+  int _selectedFruit = 0;
+
+  // This shows a CupertinoModalPopup with a reasonable fixed height which hosts CupertinoPicker.
+  void _showDialog(Widget child) {
+    showCupertinoModalPopup<void>(
+      context: context,
+      builder: (BuildContext context) => Container(
+        height: 216,
+        padding: const EdgeInsets.only(top: 6.0),
+        // The Bottom margin is provided to align the popup above the system navigation bar.
+        margin: EdgeInsets.only(
+          bottom: MediaQuery.of(context).viewInsets.bottom,
+        ),
+        // Provide a background color for the popup.
+        color: CupertinoColors.systemBackground.resolveFrom(context),
+        // Use a SafeArea widget to avoid system overlaps.
+        child: SafeArea(
+          top: false,
+          child: child,
+        ),
+      )
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      child: DefaultTextStyle(
+        style: TextStyle(
+          color: CupertinoColors.label.resolveFrom(context),
+          fontSize: 22.0,
+        ),
+        child: Center(
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              const Text('Selected fruit: '),
+              CupertinoButton(
+                padding: EdgeInsets.zero,
+                // Display a CupertinoPicker with list of fruits.
+                onPressed: () => _showDialog(
+                  CupertinoPicker(
+                    magnification: 1.22,
+                    squeeze: 1.2,
+                    useMagnifier: true,
+                    itemExtent: _kItemExtent,
+                    // This is called when selected item is changed.
+                    onSelectedItemChanged: (int selectedItem) {
+                      setState(() {
+                        _selectedFruit = selectedItem;
+                      });
+                    },
+                    children: List<Widget>.generate(_fruitNames.length, (int index) {
+                      return Center(
+                        child: Text(
+                          _fruitNames[index],
+                        ),
+                      );
+                    }),
+                  ),
+                ),
+                // This displays the selected fruit name.
+                child: Text(_fruitNames[_selectedFruit],
+                  style: const TextStyle(
+                    fontSize: 22.0,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

examples/api/test/cupertino/picker/cupertino_picker.0_test.dart

@@ -0,0 +1,32 @@
+// 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_api_samples/cupertino/picker/cupertino_picker.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+const Offset _kRowOffset = Offset(0.0, -50.0);
+
+void main() {
+  testWidgets('Change selected fruit using CupertinoPicker', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.MyApp(),
+    );
+
+    // Open the Cupertino picker.
+    await tester.tap(find.text('🍎 Apple'));
+    await tester.pumpAndSettle();
+
+    // Drag the wheel to change fruit selection.
+    await tester.drag(find.text('🥭 Mango'), _kRowOffset, touchSlopY: 0, warnIfMissed: false); // see top of file
+
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 500));
+
+    // Close the Cupertino picker.
+    await tester.tapAt(const Offset(1.0, 1.0));
+    await tester.pumpAndSettle();
+
+    expect(find.text('🍌 Banana'), findsOneWidget);
+  });
+}

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

@@ -38,6 +38,13 @@ const double _kOverAndUnderCenterOpacity = 0.447;
 ///
 /// By default, descendent texts are shown with [CupertinoTextThemeData.pickerTextStyle].
 ///
+/// {@tool dartpad}
+/// This example shows a [CupertinoPicker] that displays a list of fruits on a wheel for
+/// selection.
+///
+/// ** See code in examples/api/lib/cupertino/picker/cupertino_picker.0.dart **
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [ListWheelScrollView], the generic widget backing this picker without