Add Material 3 CheckboxListTile example and update existing example…

…s (#118792)

* Add Material 3 `CheckboxListTile` example and update existing examples

* fix `list_tile.dart` doc issues

* Remove unnecessary comma

examples/api/lib/material/checkbox_list_tile/checkbox_list_tile.0.dart

@@ -7,46 +7,43 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart' show timeDilation;
 
-void main() => runApp(const MyApp());
+void main() => runApp(const CheckboxListTileApp());
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  static const String _title = 'Flutter Code Sample';
+class CheckboxListTileApp extends StatelessWidget {
+  const CheckboxListTileApp({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: _title,
-      home: Scaffold(
-        appBar: AppBar(title: const Text(_title)),
-        body: const Center(
-          child: MyStatefulWidget(),
-        ),
-      ),
+    return const MaterialApp(
+      home: CheckboxListTileExample(),
     );
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({super.key});
+class CheckboxListTileExample extends StatefulWidget {
+  const CheckboxListTileExample({super.key});
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<CheckboxListTileExample> createState() => _CheckboxListTileExampleState();
 }
 
-class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
   @override
   Widget build(BuildContext context) {
-    return CheckboxListTile(
-      title: const Text('Animate Slowly'),
-      value: timeDilation != 1.0,
-      onChanged: (bool? value) {
-        setState(() {
-          timeDilation = value! ? 10.0 : 1.0;
-        });
-      },
-      secondary: const Icon(Icons.hourglass_empty),
+    return Scaffold(
+      appBar: AppBar(title: const Text('CheckboxListTile Sample')),
+      body: Center(
+        child: CheckboxListTile(
+          title: const Text('Animate Slowly'),
+          value: timeDilation != 1.0,
+          onChanged: (bool? value) {
+            setState(() {
+              timeDilation = value! ? 10.0 : 1.0;
+            });
+          },
+          secondary: const Icon(Icons.hourglass_empty),
+        ),
+      ),
     );
   }
 }

examples/api/lib/material/checkbox_list_tile/checkbox_list_tile.1.dart

@@ -4,99 +4,76 @@
 
 // Flutter code sample for [CheckboxListTile].
 
-import 'package:flutter/gestures.dart';
-
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
-
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
+void main() => runApp(const CheckboxListTileApp());
 
-  static const String _title = 'Flutter Code Sample';
+class CheckboxListTileApp extends StatelessWidget {
+  const CheckboxListTileApp({super.key});
 
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      title: _title,
-      home: Scaffold(
-        appBar: AppBar(title: const Text(_title)),
-        body: const Center(
-          child: MyStatefulWidget(),
-        ),
-      ),
+      theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
+      home: const CheckboxListTileExample(),
     );
   }
 }
 
-class LinkedLabelCheckbox extends StatelessWidget {
-  const LinkedLabelCheckbox({
-    super.key,
-    required this.label,
-    required this.padding,
-    required this.value,
-    required this.onChanged,
-  });
+class CheckboxListTileExample extends StatefulWidget {
+  const CheckboxListTileExample({super.key});
 
-  final String label;
-  final EdgeInsets padding;
-  final bool value;
-  final ValueChanged<bool> onChanged;
+  @override
+  State<CheckboxListTileExample> createState() => _CheckboxListTileExampleState();
+}
+
+class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
+  bool checkboxValue1 = true;
+  bool checkboxValue2 = true;
+  bool checkboxValue3 = true;
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: padding,
-      child: Row(
+    return Scaffold(
+      appBar: AppBar(title: const Text('CheckboxListTile Sample')),
+      body: Column(
         children: <Widget>[
-          Expanded(
-            child: RichText(
-              text: TextSpan(
-                text: label,
-                style: const TextStyle(
-                  color: Colors.blueAccent,
-                  decoration: TextDecoration.underline,
-                ),
-                recognizer: TapGestureRecognizer()
-                  ..onTap = () {
-                    debugPrint('Label has been tapped.');
-                  },
-              ),
-            ),
+          CheckboxListTile(
+            value: checkboxValue1,
+            onChanged: (bool? value) {
+              setState(() {
+                checkboxValue1 = value!;
+              });
+             },
+            title: const Text('Headline'),
+            subtitle: const Text('Supporting text'),
+          ),
+          const Divider(height: 0),
+          CheckboxListTile(
+            value: checkboxValue2,
+            onChanged: (bool? value) {
+              setState(() {
+                checkboxValue2 = value!;
+              });
+             },
+            title: const Text('Headline'),
+            subtitle: const Text('Longer supporting text to demonstrate how the text wraps and the checkbox is centered vertically with the text.'),
           ),
-          Checkbox(
-            value: value,
-            onChanged: (bool? newValue) {
-              onChanged(newValue!);
-            },
+          const Divider(height: 0),
+          CheckboxListTile(
+            value: checkboxValue3,
+            onChanged: (bool? value) {
+              setState(() {
+                checkboxValue3 = value!;
+              });
+             },
+            title: const Text('Headline'),
+            subtitle: const Text("Longer supporting text to demonstrate how the text wraps and how setting 'CheckboxListTile.isThreeLine = true' aligns the checkbox to the top vertically with the text."),
+            isThreeLine: true,
           ),
+          const Divider(height: 0),
         ],
       ),
     );
   }
 }
-
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({super.key});
-
-  @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
-}
-
-class _MyStatefulWidgetState extends State<MyStatefulWidget> {
-  bool _isSelected = false;
-
-  @override
-  Widget build(BuildContext context) {
-    return LinkedLabelCheckbox(
-      label: 'Linked, tappable label text',
-      padding: const EdgeInsets.symmetric(horizontal: 20.0),
-      value: _isSelected,
-      onChanged: (bool newValue) {
-        setState(() {
-          _isSelected = newValue;
-        });
-      },
-    );
-  }
-}

examples/api/lib/material/checkbox_list_tile/custom_labeled_checkbox.0.dart

@@ -0,0 +1,99 @@
+// 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 custom labeled checkbox.
+
+import 'package:flutter/gestures.dart';
+
+import 'package:flutter/material.dart';
+
+void main() => runApp(const LabeledCheckBoxApp());
+
+class LabeledCheckBoxApp extends StatelessWidget {
+  const LabeledCheckBoxApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const MaterialApp(
+      home: LabeledCheckBoxExample(),
+    );
+  }
+}
+
+class LinkedLabelCheckbox extends StatelessWidget {
+  const LinkedLabelCheckbox({
+    super.key,
+    required this.label,
+    required this.padding,
+    required this.value,
+    required this.onChanged,
+  });
+
+  final String label;
+  final EdgeInsets padding;
+  final bool value;
+  final ValueChanged<bool> onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding,
+      child: Row(
+        children: <Widget>[
+          Expanded(
+            child: RichText(
+              text: TextSpan(
+                text: label,
+                style: const TextStyle(
+                  color: Colors.blueAccent,
+                  decoration: TextDecoration.underline,
+                ),
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () {
+                    debugPrint('Label has been tapped.');
+                  },
+              ),
+            ),
+          ),
+          Checkbox(
+            value: value,
+            onChanged: (bool? newValue) {
+              onChanged(newValue!);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class LabeledCheckBoxExample extends StatefulWidget {
+  const LabeledCheckBoxExample({super.key});
+
+  @override
+  State<LabeledCheckBoxExample> createState() => _LabeledCheckBoxExampleState();
+}
+
+class _LabeledCheckBoxExampleState extends State<LabeledCheckBoxExample> {
+  bool _isSelected = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Custom Labeled Checkbox Sample')),
+      body: Center(
+        child: LinkedLabelCheckbox(
+          label: 'Linked, tappable label text',
+          padding: const EdgeInsets.symmetric(horizontal: 20.0),
+          value: _isSelected,
+          onChanged: (bool newValue) {
+            setState(() {
+              _isSelected = newValue;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

examples/api/lib/material/checkbox_list_tile/checkbox_list_tile.2.dart → examples/api/lib/material/checkbox_list_tile/custom_labeled_checkbox.1.dart

@@ -2,27 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// Flutter code sample for [CheckboxListTile].
+// Flutter code sample for custom labeled checkbox.
 
 import 'package:flutter/material.dart';
 
-void main() => runApp(const MyApp());
+void main() => runApp(const LabeledCheckBoxApp());
 
-class MyApp extends StatelessWidget {
-  const MyApp({super.key});
-
-  static const String _title = 'Flutter Code Sample';
+class LabeledCheckBoxApp extends StatelessWidget {
+  const LabeledCheckBoxApp({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: _title,
-      home: Scaffold(
-        appBar: AppBar(title: const Text(_title)),
-        body: const Center(
-          child: MyStatefulWidget(),
-        ),
-      ),
+    return const MaterialApp(
+      home: LabeledCheckBoxExample(),
     );
   }
 }
@@ -65,27 +57,32 @@ class LabeledCheckbox extends StatelessWidget {
   }
 }
 
-class MyStatefulWidget extends StatefulWidget {
-  const MyStatefulWidget({super.key});
+class LabeledCheckBoxExample extends StatefulWidget {
+  const LabeledCheckBoxExample({super.key});
 
   @override
-  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
+  State<LabeledCheckBoxExample> createState() => _LabeledCheckBoxExampleState();
 }
 
-class _MyStatefulWidgetState extends State<MyStatefulWidget> {
+class _LabeledCheckBoxExampleState extends State<LabeledCheckBoxExample> {
   bool _isSelected = false;
 
   @override
   Widget build(BuildContext context) {
-    return LabeledCheckbox(
-      label: 'This is the label text',
-      padding: const EdgeInsets.symmetric(horizontal: 20.0),
-      value: _isSelected,
-      onChanged: (bool newValue) {
-        setState(() {
-          _isSelected = newValue;
-        });
-      },
+    return Scaffold(
+      appBar: AppBar(title: const Text('Custom Labeled Checkbox Sample')),
+      body: Center(
+        child: LabeledCheckbox(
+          label: 'This is the label text',
+          padding: const EdgeInsets.symmetric(horizontal: 20.0),
+          value: _isSelected,
+          onChanged: (bool newValue) {
+            setState(() {
+              _isSelected = newValue;
+            });
+          },
+        ),
+      ),
     );
   }
 }