CupertinoFormRow: Add an interactive example (#103041)

* `CupertinoFormRow`: Add an interactive example

* fix typo

* Update docs

examples/api/lib/cupertino/form_row/cupertino_form_row.0.dart

@@ -0,0 +1,138 @@
+// 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 CupertinoFormRow
+
+import 'package:flutter/cupertino.dart';
+
+void main() => runApp(const CupertinoFormRowApp());
+
+class CupertinoFormRowApp extends StatelessWidget {
+  const CupertinoFormRowApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return const CupertinoApp(
+      theme: CupertinoThemeData(brightness: Brightness.light),
+      home: CupertinoFormRowExample(),
+    );
+  }
+}
+
+class CupertinoFormRowExample extends StatefulWidget {
+  const CupertinoFormRowExample({Key? key}) : super(key: key);
+
+  @override
+  State<CupertinoFormRowExample> createState() => _CupertinoFormRowExampleState();
+}
+
+class _CupertinoFormRowExampleState extends State<CupertinoFormRowExample> {
+  bool airplaneMode = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return CupertinoPageScaffold(
+      child: CupertinoFormSection(
+        header: const Text('Connectivity'),
+        children: <Widget>[
+          CupertinoFormRow(
+            prefix: const PrefixWidget(
+              icon: CupertinoIcons.airplane,
+              title: 'Airplane Mode',
+              color: CupertinoColors.systemOrange,
+            ),
+            child: CupertinoSwitch(
+              value: airplaneMode,
+              onChanged: (bool value) {
+                setState(() {
+                  airplaneMode = value;
+                });
+              },
+            ),
+          ),
+          CupertinoFormRow(
+            prefix: const PrefixWidget(
+              icon: CupertinoIcons.wifi,
+              title: 'Wi-Fi',
+              color: CupertinoColors.systemBlue,
+            ),
+            error: const Text('Home network unavailable'),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: const <Widget>[
+                Text('Not connected'),
+                SizedBox(width: 5),
+                Icon(CupertinoIcons.forward)
+              ],
+            ),
+          ),
+          CupertinoFormRow(
+            prefix: const PrefixWidget(
+              icon: CupertinoIcons.bluetooth,
+              title: 'Bluetooth',
+              color: CupertinoColors.activeBlue,
+            ),
+            helper: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 4.0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: const <Widget>[
+                  Text('Headphone'),
+                  Text('Connected'),
+                ],
+              ),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: const <Widget>[
+                Text('On'),
+                SizedBox(width: 5),
+                Icon(CupertinoIcons.forward)
+              ],
+            ),
+          ),
+          const CupertinoFormRow(
+            prefix: PrefixWidget(
+              icon: CupertinoIcons.bluetooth,
+              title: 'Mobile Data',
+              color: CupertinoColors.systemGreen,
+            ),
+            child: Icon(CupertinoIcons.forward),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class PrefixWidget extends StatelessWidget {
+  const PrefixWidget({
+    Key? key,
+    required this.icon,
+    required this.title,
+    required this.color,
+  }) : super(key: key);
+
+  final IconData icon;
+  final String title;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: <Widget>[
+        Container(
+          padding: const EdgeInsets.all(4.0),
+          decoration: BoxDecoration(
+            color: color,
+            borderRadius: BorderRadius.circular(4.0),
+          ),
+          child: Icon(icon, color: CupertinoColors.white),
+        ),
+        const SizedBox(width: 15),
+        Text(title)
+      ],
+    );
+  }
+}

examples/api/test/cupertino/form_row/cupertino_form_row.0_test.dart

@@ -0,0 +1,23 @@
+// 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/form_row/cupertino_form_row.0.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Cupertino form section displays cupertino form rows', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      const example.CupertinoFormRowApp(),
+    );
+
+    expect(find.byType(CupertinoFormSection), findsOneWidget);
+    expect(find.byType(CupertinoFormRow), findsNWidgets(4));
+    expect(find.widgetWithText(CupertinoFormSection, 'Connectivity'), findsOneWidget);
+    expect(find.widgetWithText(CupertinoFormRow, 'Airplane Mode'), findsOneWidget);
+    expect(find.widgetWithText(CupertinoFormRow, 'Wi-Fi'), findsOneWidget);
+    expect(find.widgetWithText(CupertinoFormRow, 'Bluetooth'), findsOneWidget);
+    expect(find.widgetWithText(CupertinoFormRow, 'Mobile Data'), findsOneWidget);
+  });
+}

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

@@ -34,50 +34,13 @@ const EdgeInsetsGeometry _kDefaultPadding =
 /// be shown in [CupertinoColors.destructiveRed] coloring and
 /// medium-weighted font.
 ///
-/// {@tool snippet}
+/// {@tool dartpad}
+/// Creates a [CupertinoFormSection] containing a [CupertinoFormRow] with [prefix],
+/// [child], [helper] and [error] specified.
 ///
-/// Creates a [CupertinoFormSection] containing a [CupertinoFormRow] with the
+/// ** See code in examples/api/lib/cupertino/form_row/cupertino_form_row.0.dart **
-/// [prefix], [child], [helper] and [error] widgets.
-///
-/// ```dart
-/// class FlutterDemo extends StatefulWidget {
-///   const FlutterDemo({Key? key}) : super(key: key);
-///
-///   @override
-///   State<FlutterDemo> createState() => _FlutterDemoState();
-/// }
-///
-/// class _FlutterDemoState extends State<FlutterDemo> {
-///   bool toggleValue = false;
-///
-///   @override
-///   Widget build(BuildContext context) {
-///     return CupertinoPageScaffold(
-///       child: Center(
-///         child: CupertinoFormSection(
-///           header: const Text('SECTION 1'),
-///           children: <Widget>[
-///             CupertinoFormRow(
-///               prefix: const Text('Toggle'),
-///               helper: const Text('Use your instincts'),
-///               error: toggleValue ? const Text('Cannot be true') : null,
-///               child: CupertinoSwitch(
-///                 value: toggleValue,
-///                 onChanged: (bool value) {
-///                   setState(() {
-///                     toggleValue = value;
-///                   });
-///                 },
-///               ),
-///             ),
-///           ],
-///         ),
-///       ),
-///     );
-///   }
-/// }
-/// ```
 /// {@end-tool}
+///
 class CupertinoFormRow extends StatelessWidget {
   /// Creates an iOS-style split form row with a standard prefix and child widget.
   /// Also provides a space for error and helper widgets that appear underneath.