Fix dual focus issue in CheckboxListTile, RadioListTile and SwitchListTile (#143213)

These widgets can now only receive focus once when tabbing through the focus tree.

Author: Nitesh Sharma

packages/flutter/lib/src/material/checkbox_list_tile.dart

@@ -475,42 +475,46 @@ class CheckboxListTile extends StatelessWidget {
 
     switch (_checkboxType) {
       case _CheckboxType.material:
-        control = Checkbox(
-          value: value,
-          onChanged: enabled ?? true ? onChanged : null,
-          mouseCursor: mouseCursor,
-          activeColor: activeColor,
-          fillColor: fillColor,
-          checkColor: checkColor,
-          hoverColor: hoverColor,
-          overlayColor: overlayColor,
-          splashRadius: splashRadius,
-          materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
-          autofocus: autofocus,
-          tristate: tristate,
-          shape: checkboxShape,
-          side: side,
-          isError: isError,
-          semanticLabel: checkboxSemanticLabel,
+        control = ExcludeFocus(
+          child: Checkbox(
+            value: value,
+            onChanged: enabled ?? true ? onChanged : null,
+            mouseCursor: mouseCursor,
+            activeColor: activeColor,
+            fillColor: fillColor,
+            checkColor: checkColor,
+            hoverColor: hoverColor,
+            overlayColor: overlayColor,
+            splashRadius: splashRadius,
+            materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
+            autofocus: autofocus,
+            tristate: tristate,
+            shape: checkboxShape,
+            side: side,
+            isError: isError,
+            semanticLabel: checkboxSemanticLabel,
+          ),
         );
       case _CheckboxType.adaptive:
-        control = Checkbox.adaptive(
-          value: value,
-          onChanged: enabled ?? true ? onChanged : null,
-          mouseCursor: mouseCursor,
-          activeColor: activeColor,
-          fillColor: fillColor,
-          checkColor: checkColor,
-          hoverColor: hoverColor,
-          overlayColor: overlayColor,
-          splashRadius: splashRadius,
-          materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
-          autofocus: autofocus,
-          tristate: tristate,
-          shape: checkboxShape,
-          side: side,
-          isError: isError,
-          semanticLabel: checkboxSemanticLabel,
+        control = ExcludeFocus(
+          child: Checkbox.adaptive(
+            value: value,
+            onChanged: enabled ?? true ? onChanged : null,
+            mouseCursor: mouseCursor,
+            activeColor: activeColor,
+            fillColor: fillColor,
+            checkColor: checkColor,
+            hoverColor: hoverColor,
+            overlayColor: overlayColor,
+            splashRadius: splashRadius,
+            materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
+            autofocus: autofocus,
+            tristate: tristate,
+            shape: checkboxShape,
+            side: side,
+            isError: isError,
+            semanticLabel: checkboxSemanticLabel,
+          ),
         );
     }
 

packages/flutter/lib/src/material/radio_list_tile.dart

@@ -452,35 +452,39 @@ class RadioListTile<T> extends StatelessWidget {
     final Widget control;
     switch (_radioType) {
       case _RadioType.material:
-        control = Radio<T>(
-          value: value,
-          groupValue: groupValue,
-          onChanged: onChanged,
-          toggleable: toggleable,
-          activeColor: activeColor,
-          materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
-          autofocus: autofocus,
-          fillColor: fillColor,
-          mouseCursor: mouseCursor,
-          hoverColor: hoverColor,
-          overlayColor: overlayColor,
-          splashRadius: splashRadius,
+        control = ExcludeFocus(
+          child: Radio<T>(
+            value: value,
+            groupValue: groupValue,
+            onChanged: onChanged,
+            toggleable: toggleable,
+            activeColor: activeColor,
+            materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
+            autofocus: autofocus,
+            fillColor: fillColor,
+            mouseCursor: mouseCursor,
+            hoverColor: hoverColor,
+            overlayColor: overlayColor,
+            splashRadius: splashRadius,
+          ),
         );
       case _RadioType.adaptive:
-        control = Radio<T>.adaptive(
-          value: value,
-          groupValue: groupValue,
-          onChanged: onChanged,
-          toggleable: toggleable,
-          activeColor: activeColor,
-          materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
-          autofocus: autofocus,
-          fillColor: fillColor,
-          mouseCursor: mouseCursor,
-          hoverColor: hoverColor,
-          overlayColor: overlayColor,
-          splashRadius: splashRadius,
-          useCupertinoCheckmarkStyle: useCupertinoCheckmarkStyle,
+        control = ExcludeFocus(
+          child: Radio<T>.adaptive(
+            value: value,
+            groupValue: groupValue,
+            onChanged: onChanged,
+            toggleable: toggleable,
+            activeColor: activeColor,
+            materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
+            autofocus: autofocus,
+            fillColor: fillColor,
+            mouseCursor: mouseCursor,
+            hoverColor: hoverColor,
+            overlayColor: overlayColor,
+            splashRadius: splashRadius,
+            useCupertinoCheckmarkStyle: useCupertinoCheckmarkStyle,
+          ),
         );
     }
 

packages/flutter/lib/src/material/switch_list_tile.dart

@@ -511,54 +511,58 @@ class SwitchListTile extends StatelessWidget {
     final Widget control;
     switch (_switchListTileType) {
       case _SwitchListTileType.adaptive:
-        control = Switch.adaptive(
-          value: value,
-          onChanged: onChanged,
-          activeColor: activeColor,
-          activeThumbImage: activeThumbImage,
-          inactiveThumbImage: inactiveThumbImage,
-          materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
-          activeTrackColor: activeTrackColor,
-          inactiveTrackColor: inactiveTrackColor,
-          inactiveThumbColor: inactiveThumbColor,
-          autofocus: autofocus,
-          onFocusChange: onFocusChange,
-          onActiveThumbImageError: onActiveThumbImageError,
-          onInactiveThumbImageError: onInactiveThumbImageError,
-          thumbColor: thumbColor,
-          trackColor: trackColor,
-          trackOutlineColor: trackOutlineColor,
-          thumbIcon: thumbIcon,
-          applyCupertinoTheme: applyCupertinoTheme,
-          dragStartBehavior: dragStartBehavior,
-          mouseCursor: mouseCursor,
-          splashRadius: splashRadius,
-          overlayColor: overlayColor,
+        control = ExcludeFocus(
+          child: Switch.adaptive(
+            value: value,
+            onChanged: onChanged,
+            activeColor: activeColor,
+            activeThumbImage: activeThumbImage,
+            inactiveThumbImage: inactiveThumbImage,
+            materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
+            activeTrackColor: activeTrackColor,
+            inactiveTrackColor: inactiveTrackColor,
+            inactiveThumbColor: inactiveThumbColor,
+            autofocus: autofocus,
+            onFocusChange: onFocusChange,
+            onActiveThumbImageError: onActiveThumbImageError,
+            onInactiveThumbImageError: onInactiveThumbImageError,
+            thumbColor: thumbColor,
+            trackColor: trackColor,
+            trackOutlineColor: trackOutlineColor,
+            thumbIcon: thumbIcon,
+            applyCupertinoTheme: applyCupertinoTheme,
+            dragStartBehavior: dragStartBehavior,
+            mouseCursor: mouseCursor,
+            splashRadius: splashRadius,
+            overlayColor: overlayColor,
+          ),
         );
 
       case _SwitchListTileType.material:
-        control = Switch(
-          value: value,
-          onChanged: onChanged,
-          activeColor: activeColor,
-          activeThumbImage: activeThumbImage,
-          inactiveThumbImage: inactiveThumbImage,
-          materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
-          activeTrackColor: activeTrackColor,
-          inactiveTrackColor: inactiveTrackColor,
-          inactiveThumbColor: inactiveThumbColor,
-          autofocus: autofocus,
-          onFocusChange: onFocusChange,
-          onActiveThumbImageError: onActiveThumbImageError,
-          onInactiveThumbImageError: onInactiveThumbImageError,
-          thumbColor: thumbColor,
-          trackColor: trackColor,
-          trackOutlineColor: trackOutlineColor,
-          thumbIcon: thumbIcon,
-          dragStartBehavior: dragStartBehavior,
-          mouseCursor: mouseCursor,
-          splashRadius: splashRadius,
-          overlayColor: overlayColor,
+        control = ExcludeFocus(
+          child: Switch(
+            value: value,
+            onChanged: onChanged,
+            activeColor: activeColor,
+            activeThumbImage: activeThumbImage,
+            inactiveThumbImage: inactiveThumbImage,
+            materialTapTargetSize: materialTapTargetSize ?? MaterialTapTargetSize.shrinkWrap,
+            activeTrackColor: activeTrackColor,
+            inactiveTrackColor: inactiveTrackColor,
+            inactiveThumbColor: inactiveThumbColor,
+            autofocus: autofocus,
+            onFocusChange: onFocusChange,
+            onActiveThumbImageError: onActiveThumbImageError,
+            onInactiveThumbImageError: onInactiveThumbImageError,
+            thumbColor: thumbColor,
+            trackColor: trackColor,
+            trackOutlineColor: trackOutlineColor,
+            thumbIcon: thumbIcon,
+            dragStartBehavior: dragStartBehavior,
+            mouseCursor: mouseCursor,
+            splashRadius: splashRadius,
+            overlayColor: overlayColor,
+          ),
         );
     }
 

packages/flutter/test/material/checkbox_list_tile_test.dart

@@ -1194,6 +1194,41 @@ void main() {
 
     handle.dispose();
   });
+
+  testWidgets('CheckboxListTile.control widget should not request focus on traversal', (WidgetTester tester) async {
+    final GlobalKey firstChildKey = GlobalKey();
+    final GlobalKey secondChildKey = GlobalKey();
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: Column(
+            children: <Widget>[
+              CheckboxListTile(
+                value: true,
+                onChanged: (bool? value) {},
+                title: Text('Hey', key: firstChildKey),
+              ),
+              CheckboxListTile(
+                value: true,
+                onChanged: (bool? value) {},
+                title: Text('There', key: secondChildKey),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    await tester.pump();
+    Focus.of(firstChildKey.currentContext!).requestFocus();
+    await tester.pump();
+    expect(Focus.of(firstChildKey.currentContext!).hasPrimaryFocus, isTrue);
+    Focus.of(firstChildKey.currentContext!).nextFocus();
+    await tester.pump();
+    expect(Focus.of(firstChildKey.currentContext!).hasPrimaryFocus, isFalse);
+    expect(Focus.of(secondChildKey.currentContext!).hasPrimaryFocus, isTrue);
+  });
 }
 
 class _SelectedGrabMouseCursor extends MaterialStateMouseCursor {

packages/flutter/test/material/radio_list_tile_test.dart

@@ -1260,6 +1260,43 @@ void main() {
     expect(tester.getSize(find.byType(Radio<bool>)), const Size(48.0, 48.0));
   });
 
+  testWidgets('RadioListTile.control widget should not request focus on traversal', (WidgetTester tester) async {
+    final GlobalKey firstChildKey = GlobalKey();
+    final GlobalKey secondChildKey = GlobalKey();
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Material(
+          child: Column(
+            children: <Widget>[
+              RadioListTile<bool>(
+                value: true,
+                groupValue: true,
+                onChanged: (bool? value) {},
+                title: Text('Hey', key: firstChildKey),
+              ),
+              RadioListTile<bool>(
+                value: true,
+                groupValue: true,
+                onChanged: (bool? value) {},
+                title: Text('There', key: secondChildKey),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+
+    await tester.pump();
+    Focus.of(firstChildKey.currentContext!).requestFocus();
+    await tester.pump();
+    expect(Focus.of(firstChildKey.currentContext!).hasPrimaryFocus, isTrue);
+    Focus.of(firstChildKey.currentContext!).nextFocus();
+    await tester.pump();
+    expect(Focus.of(firstChildKey.currentContext!).hasPrimaryFocus, isFalse);
+    expect(Focus.of(secondChildKey.currentContext!).hasPrimaryFocus, isTrue);
+  });
+
   testWidgets('RadioListTile.adaptive shows the correct radio platform widget', (WidgetTester tester) async {
     Widget buildApp(TargetPlatform platform) {
       return MaterialApp(