CupertinoSwitch: Add an interactive example (#103043)

Update

Author: TahaTesser

examples/api/lib/cupertino/switch/cupertino_switch.0.dart

@@ -0,0 +1,76 @@
+// 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 CupertinoSwitch
+
+import 'package:flutter/cupertino.dart';
+
+void main() => runApp(const CupertinoSwitchApp());
+
+class CupertinoSwitchApp extends StatelessWidget {
+  const CupertinoSwitchApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoApp(
+      theme: CupertinoThemeData(brightness: Brightness.light),
+      home: CupertinoSwitchExample(),
+    );
+  }
+}
+
+class CupertinoSwitchExample extends StatefulWidget {
+  const CupertinoSwitchExample({Key? key}) : super(key: key);
+
+  @override
+  State<CupertinoSwitchExample> createState() => _CupertinoSwitchExampleState();
+}
+
+class _CupertinoSwitchExampleState extends State<CupertinoSwitchExample> {
+  bool wifi = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      navigationBar: const CupertinoNavigationBar(
+        middle: Text('CupertinoSwitch Sample'),
+      ),
+      child: Center(
+        // CupertinoFormRow's main axis is set to max by default.
+        // Set the intrinsic height widget to center the CupertinoFormRow.
+        child: IntrinsicHeight(
+          child: Container(
+            color: CupertinoTheme.of(context).barBackgroundColor,
+            child: CupertinoFormRow(
+              prefix: Row(
+                children: <Widget>[
+                  Icon(
+                    // Wifi icon is updated based on switch value.
+                    wifi ? CupertinoIcons.wifi : CupertinoIcons.wifi_slash,
+                    color: wifi ? CupertinoColors.systemBlue : CupertinoColors.systemRed,
+                  ),
+                  const SizedBox(width: 10),
+                  const Text('Wi-Fi')
+                ],
+              ),
+              child: CupertinoSwitch(
+                // This bool value toggles the switch.
+                value: wifi,
+                thumbColor: CupertinoColors.systemBlue,
+                trackColor: CupertinoColors.systemRed.withOpacity(0.14),
+                activeColor: CupertinoColors.systemRed.withOpacity(0.64),
+                onChanged: (bool? value) {
+                  // This is called when the user toggles the switch.
+                  setState(() {
+                    wifi = value!;
+                  });
+                },
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

examples/api/test/cupertino/switch/cupertino_switch.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/cupertino.dart';
+import 'package:flutter_api_samples/cupertino/switch/cupertino_switch.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Toggling cupertino switch updates icon', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.CupertinoSwitchApp(),
+    );
+
+    final Finder switchFinder = find.byType(CupertinoSwitch);
+    CupertinoSwitch cupertinoSwitch = tester.widget<CupertinoSwitch>(switchFinder);
+    final Finder wifiOnIcon = find.byIcon(CupertinoIcons.wifi);
+    final Finder wifiOffIcon = find.byIcon(CupertinoIcons.wifi_slash);
+    expect(cupertinoSwitch.value, true);
+    // When the switch is on, wifi icon should be visible.
+    expect(wifiOnIcon, findsOneWidget);
+    expect(wifiOffIcon, findsNothing);
+
+    await tester.tap(switchFinder);
+    await tester.pumpAndSettle();
+    cupertinoSwitch = tester.widget<CupertinoSwitch>(switchFinder);
+    expect(cupertinoSwitch.value, false);
+    // When the switch is off, wifi slash icon should be visible.
+    expect(wifiOnIcon, findsNothing);
+    expect(wifiOffIcon, findsOneWidget);
+  });
+}

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

@@ -26,6 +26,13 @@ import 'thumb_painter.dart';
 /// that use a switch will listen for the [onChanged] callback and rebuild the
 /// switch with a new [value] to update the visual appearance of the switch.
 ///
+/// {@tool dartpad}
+/// This example shows a toggleable [CupertinoSwitch]. When the thumb slides to
+/// the other side of the track, the switch is toggled between on/off.
+///
+/// ** See code in examples/api/lib/cupertino/switch/cupertino_switch.0.dart **
+/// {@end-tool}
+///
 /// {@tool snippet}
 ///
 /// This sample shows how to use a [CupertinoSwitch] in a [ListTile]. The