CupertinoSlidingSegmentedControl: Add an interactive example (#98156)

examples/api/lib/cupertino/segmented_control/cupertino_sliding_segmented_control.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 CupertinoSlidingSegmentedControl
+
+import 'package:flutter/cupertino.dart';
+
+enum Sky { midnight, viridian, cerulean }
+
+Map<Sky, Color> skyColors = <Sky, Color> {
+  Sky.midnight: const Color(0xff191970),
+  Sky.viridian: const Color(0xff40826d),
+  Sky.cerulean: const Color(0xff007ba7),
+};
+
+void main() => runApp(const MyApp());
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  static const String _title = 'CupertinoSlidingSegmentedControl Sample';
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoApp(
+      title: _title,
+      home: SegmentedControlSample(),
+    );
+  }
+}
+
+class SegmentedControlSample extends StatefulWidget {
+  const SegmentedControlSample({Key? key}) : super(key: key);
+
+  @override
+  State<SegmentedControlSample> createState() => _SegmentedControlSampleState();
+}
+
+class _SegmentedControlSampleState extends State<SegmentedControlSample> {
+  Sky _selectedSegment = Sky.midnight;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      backgroundColor: skyColors[_selectedSegment],
+      navigationBar: CupertinoNavigationBar(
+        // This Cupertino segmented control has the enum "Sky" as the type.
+        middle: CupertinoSlidingSegmentedControl<Sky>(
+          backgroundColor: CupertinoColors.systemGrey2,
+          thumbColor: skyColors[_selectedSegment]!,
+          // This represents the currently selected segmented control.
+          groupValue: _selectedSegment,
+          // Callback that sets the selected segmented control.
+          onValueChanged: (Sky? value) {
+            if (value != null) {
+              setState(() {
+                _selectedSegment = value;
+              });
+            }
+          },
+          children: const <Sky, Widget>{
+            Sky.midnight: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 20),
+              child: Text(
+                'Midnight',
+                style: TextStyle(color: CupertinoColors.white),
+              ),
+            ),
+            Sky.viridian: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 20),
+              child: Text(
+                'Viridian',
+                style: TextStyle(color: CupertinoColors.white),
+              ),
+            ),
+            Sky.cerulean: Padding(
+              padding: EdgeInsets.symmetric(horizontal: 20),
+              child: Text(
+                'Cerulean',
+                style: TextStyle(color: CupertinoColors.white),
+              ),
+            ),
+          },
+        ),
+      ),
+      child: Center(
+        child: Text(
+          'Selected Segment: ${_selectedSegment.name}',
+          style: const TextStyle(color: CupertinoColors.white),
+        ),
+      ),
+    );
+  }
+}

examples/api/test/cupertino/segmented_control/cupertino_sliding_segmented_control.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_api_samples/cupertino/segmented_control/cupertino_sliding_segmented_control.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Can change a selected segmented control', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.MyApp(),
+    );
+
+    expect(find.text('Selected Segment: midnight'), findsOneWidget);
+    await tester.tap(find.text('Cerulean'));
+    await tester.pumpAndSettle();
+    expect(find.text('Selected Segment: cerulean'), findsOneWidget);
+  });
+}

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

@@ -283,6 +283,15 @@ class _SegmentSeparatorState extends State<_SegmentSeparator> with TickerProvide
 /// [thumbColor], [backgroundColor] arguments can be used to override the
 /// segmented control's colors from its defaults.
 ///
+/// {@tool dartpad}
+/// This example shows a [CupertinoSlidingSegmentedControl] with an enum type.
+///
+/// The callback provided to [onValueChanged] should update the state of
+/// the parent [StatefulWidget] using the [State.setState] method, so that
+/// the parent gets rebuilt; for example:
+///
+/// ** See code in examples/api/lib/cupertino/segmented_control/cupertino_sliding_segmented_control.0.dart **
+/// {@end-tool}
 /// See also:
 ///
 ///  * <https://developer.apple.com/design/human-interface-guidelines/ios/controls/segmented-controls/>