Add trackOutlineColor for Switch and SwitchListTile (#120140)

* Add trackOutlineColor for Switch and SwitchListTile

* Update tests

* Update test

* Clean up unnecessary StatefulBUilder in tests

* Fix failed test

---------

Co-authored-by: Qun Cheng <quncheng@google.com>

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

@@ -105,6 +105,7 @@ class Switch extends StatelessWidget {
     this.onInactiveThumbImageError,
     this.thumbColor,
     this.trackColor,
+    this.trackOutlineColor,
     this.thumbIcon,
     this.materialTapTargetSize,
     this.dragStartBehavior = DragStartBehavior.start,
@@ -151,6 +152,7 @@ class Switch extends StatelessWidget {
     this.materialTapTargetSize,
     this.thumbColor,
     this.trackColor,
+    this.trackOutlineColor,
     this.thumbIcon,
     this.dragStartBehavior = DragStartBehavior.start,
     this.mouseCursor,
@@ -333,6 +335,40 @@ class Switch extends StatelessWidget {
   /// | Disabled | `Colors.black12`                | `Colors.white10`                |
   final MaterialStateProperty<Color?>? trackColor;
 
+  /// {@template flutter.material.switch.trackOutlineColor}
+  /// The outline color of this [Switch]'s track.
+  ///
+  /// Resolved in the following states:
+  ///  * [MaterialState.selected].
+  ///  * [MaterialState.hovered].
+  ///  * [MaterialState.focused].
+  ///  * [MaterialState.disabled].
+  ///
+  /// {@tool snippet}
+  /// This example resolves the [trackOutlineColor] based on the current
+  /// [MaterialState] of the [Switch], providing a different [Color] when it is
+  /// [MaterialState.disabled].
+  ///
+  /// ```dart
+  /// Switch(
+  ///   value: true,
+  ///   onChanged: (_) => true,
+  ///   trackOutlineColor: MaterialStateProperty.resolveWith<Color?>((Set<MaterialState> states) {
+  ///     if (states.contains(MaterialState.disabled)) {
+  ///       return Colors.orange.withOpacity(.48);
+  ///     }
+  ///     return null; // Use the default color.
+  ///   }),
+  /// )
+  /// ```
+  /// {@end-tool}
+  /// {@endtemplate}
+  ///
+  /// In Material 3, the outline color defaults to transparent in the selected
+  /// state and [ColorScheme.outline] in the unselected state. In Material 2,
+  /// the [Switch] track has no outline by default.
+  final MaterialStateProperty<Color?>? trackOutlineColor;
+
   /// {@template flutter.material.switch.thumbIcon}
   /// The icon to use on the thumb of this switch
   ///
@@ -519,6 +555,7 @@ class Switch extends StatelessWidget {
       onInactiveThumbImageError: onInactiveThumbImageError,
       thumbColor: thumbColor,
       trackColor: trackColor,
+      trackOutlineColor: trackOutlineColor,
       thumbIcon: thumbIcon,
       materialTapTargetSize: materialTapTargetSize,
       dragStartBehavior: dragStartBehavior,
@@ -578,6 +615,7 @@ class _MaterialSwitch extends StatefulWidget {
     this.onInactiveThumbImageError,
     this.thumbColor,
     this.trackColor,
+    this.trackOutlineColor,
     this.thumbIcon,
     this.materialTapTargetSize,
     this.dragStartBehavior = DragStartBehavior.start,
@@ -604,6 +642,7 @@ class _MaterialSwitch extends StatefulWidget {
   final ImageErrorListener? onInactiveThumbImageError;
   final MaterialStateProperty<Color?>? thumbColor;
   final MaterialStateProperty<Color?>? trackColor;
+  final MaterialStateProperty<Color?>? trackOutlineColor;
   final MaterialStateProperty<Icon?>? thumbIcon;
   final MaterialTapTargetSize? materialTapTargetSize;
   final DragStartBehavior dragStartBehavior;
@@ -765,11 +804,17 @@ class _MaterialSwitchState extends State<_MaterialSwitch> with TickerProviderSta
       ?? switchTheme.trackColor?.resolve(activeStates)
       ?? _widgetThumbColor.resolve(activeStates)?.withAlpha(0x80)
       ?? defaults.trackColor!.resolve(activeStates)!;
+    final Color effectiveActiveTrackOutlineColor = widget.trackOutlineColor?.resolve(activeStates)
+      ?? switchTheme.trackOutlineColor?.resolve(activeStates)
+      ?? Colors.transparent;
+
     final Color effectiveInactiveTrackColor = widget.trackColor?.resolve(inactiveStates)
       ?? _widgetTrackColor.resolve(inactiveStates)
       ?? switchTheme.trackColor?.resolve(inactiveStates)
       ?? defaults.trackColor!.resolve(inactiveStates)!;
-    final Color? effectiveInactiveTrackOutlineColor = switchConfig.trackOutlineColor?.resolve(inactiveStates);
+    final Color? effectiveInactiveTrackOutlineColor = widget.trackOutlineColor?.resolve(inactiveStates)
+      ?? switchTheme.trackOutlineColor?.resolve(inactiveStates)
+      ?? defaults.trackOutlineColor?.resolve(inactiveStates);
 
     final Icon? effectiveActiveIcon = widget.thumbIcon?.resolve(activeStates)
       ?? switchTheme.thumbIcon?.resolve(activeStates);
@@ -858,6 +903,7 @@ class _MaterialSwitchState extends State<_MaterialSwitch> with TickerProviderSta
             ..inactiveThumbImage = widget.inactiveThumbImage
             ..onInactiveThumbImageError = widget.onInactiveThumbImageError
             ..activeTrackColor = effectiveActiveTrackColor
+            ..activeTrackOutlineColor = effectiveActiveTrackOutlineColor
             ..inactiveTrackColor = effectiveInactiveTrackColor
             ..inactiveTrackOutlineColor = effectiveInactiveTrackOutlineColor
             ..configuration = createLocalImageConfiguration(context)
@@ -1089,6 +1135,16 @@ class _SwitchPainter extends ToggleablePainter {
     notifyListeners();
   }
 
+  Color? get activeTrackOutlineColor => _activeTrackOutlineColor;
+  Color? _activeTrackOutlineColor;
+  set activeTrackOutlineColor(Color? value) {
+    if (value == _activeTrackOutlineColor) {
+      return;
+    }
+    _activeTrackOutlineColor = value;
+    notifyListeners();
+  }
+
   Color? get inactiveTrackOutlineColor => _inactiveTrackOutlineColor;
   Color? _inactiveTrackOutlineColor;
   set inactiveTrackOutlineColor(Color? value) {
@@ -1297,7 +1353,7 @@ class _SwitchPainter extends ToggleablePainter {
     final double colorValue = CurvedAnimation(parent: positionController, curve: Curves.easeOut, reverseCurve: Curves.easeIn).value;
     final Color trackColor = Color.lerp(inactiveTrackColor, activeTrackColor, colorValue)!;
     final Color? trackOutlineColor = inactiveTrackOutlineColor == null ? null
-        : Color.lerp(inactiveTrackOutlineColor, Colors.transparent, colorValue);
+        : Color.lerp(inactiveTrackOutlineColor, activeTrackOutlineColor, colorValue);
     Color lerpedThumbColor;
     if (!reaction.isDismissed) {
       lerpedThumbColor = Color.lerp(inactivePressedColor, activePressedColor, colorValue)!;
@@ -1493,7 +1549,6 @@ mixin _SwitchConfig {
   double get pressedThumbRadius;
   double get thumbRadiusWithIcon;
   List<BoxShadow>? get thumbShadow;
-  MaterialStateProperty<Color?>? get trackOutlineColor;
   MaterialStateProperty<Color> get iconColor;
   double? get thumbOffset;
   Size get transitionalThumbSize;
@@ -1534,9 +1589,6 @@ class _SwitchConfigM2 with _SwitchConfig {
   @override
   double get trackHeight => 14.0;
 
-  @override
-  MaterialStateProperty<Color?>? get trackOutlineColor => null;
-
   @override
   double get trackWidth => 33.0;
 
@@ -1590,6 +1642,9 @@ class _SwitchDefaultsM2 extends SwitchThemeData {
     });
   }
 
+  @override
+  MaterialStateProperty<Color?>? get trackOutlineColor => null;
+
   @override
   MaterialTapTargetSize get materialTapTargetSize => _theme.materialTapTargetSize;
 
@@ -1700,6 +1755,19 @@ class _SwitchDefaultsM3 extends SwitchThemeData {
     });
   }
 
+  @override
+  MaterialStateProperty<Color?> get trackOutlineColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.selected)) {
+        return Colors.transparent;
+      }
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.12);
+      }
+      return _colors.outline;
+    });
+  }
+
   @override
   MaterialStateProperty<Color?> get overlayColor {
     return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -1802,19 +1870,6 @@ class _SwitchConfigM3 with _SwitchConfig {
   @override
   double get trackHeight => 32.0;
 
-  @override
-  MaterialStateProperty<Color?> get trackOutlineColor {
-    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
-      if (states.contains(MaterialState.selected)) {
-        return null;
-      }
-      if (states.contains(MaterialState.disabled)) {
-        return _colors.onSurface.withOpacity(0.12);
-      }
-      return _colors.outline;
-    });
-  }
-
   @override
   double get trackWidth => 52.0;
 

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

@@ -186,6 +186,7 @@ class SwitchListTile extends StatelessWidget {
     this.onFocusChange,
     this.enableFeedback,
     this.hoverColor,
+    this.trackOutlineColor,
   }) : _switchListTileType = _SwitchListTileType.material,
        assert(!isThreeLine || subtitle != null);
 
@@ -228,6 +229,7 @@ class SwitchListTile extends StatelessWidget {
     this.onFocusChange,
     this.enableFeedback,
     this.hoverColor,
+    this.trackOutlineColor,
   }) : _switchListTileType = _SwitchListTileType.adaptive,
        assert(!isThreeLine || subtitle != null);
 
@@ -382,6 +384,16 @@ class SwitchListTile extends StatelessWidget {
   /// The color for the tile's [Material] when a pointer is hovering over it.
   final Color? hoverColor;
 
+  /// {@macro flutter.material.switch.trackOutlineColor}
+  ///
+  /// The [ListTile] will be focused when this [SwitchListTile] requests focus,
+  /// so the focused outline color of the switch will be ignored.
+  ///
+  /// In Material 3, the outline color defaults to transparent in the selected
+  /// state and [ColorScheme.outline] in the unselected state. In Material 2,
+  /// the [Switch] track has no outline.
+  final MaterialStateProperty<Color?>? trackOutlineColor;
+
   @override
   Widget build(BuildContext context) {
     final Widget control;
@@ -399,6 +411,7 @@ class SwitchListTile extends StatelessWidget {
           inactiveThumbColor: inactiveThumbColor,
           autofocus: autofocus,
           onFocusChange: onFocusChange,
+          trackOutlineColor: trackOutlineColor,
         );
         break;
 
@@ -415,6 +428,7 @@ class SwitchListTile extends StatelessWidget {
           inactiveThumbColor: inactiveThumbColor,
           autofocus: autofocus,
           onFocusChange: onFocusChange,
+          trackOutlineColor: trackOutlineColor,
         );
     }
 

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

@@ -39,6 +39,7 @@ class SwitchThemeData with Diagnosticable {
   const SwitchThemeData({
     this.thumbColor,
     this.trackColor,
+    this.trackOutlineColor,
     this.materialTapTargetSize,
     this.mouseCursor,
     this.overlayColor,
@@ -56,6 +57,11 @@ class SwitchThemeData with Diagnosticable {
   /// If specified, overrides the default value of [Switch.trackColor].
   final MaterialStateProperty<Color?>? trackColor;
 
+  /// {@macro flutter.material.switch.trackOutlineColor}
+  ///
+  /// If specified, overrides the default value of [Switch.trackOutlineColor].
+  final MaterialStateProperty<Color?>? trackOutlineColor;
+
   /// {@macro flutter.material.switch.materialTapTargetSize}
   ///
   /// If specified, overrides the default value of
@@ -87,6 +93,7 @@ class SwitchThemeData with Diagnosticable {
   SwitchThemeData copyWith({
     MaterialStateProperty<Color?>? thumbColor,
     MaterialStateProperty<Color?>? trackColor,
+    MaterialStateProperty<Color?>? trackOutlineColor,
     MaterialTapTargetSize? materialTapTargetSize,
     MaterialStateProperty<MouseCursor?>? mouseCursor,
     MaterialStateProperty<Color?>? overlayColor,
@@ -96,6 +103,7 @@ class SwitchThemeData with Diagnosticable {
     return SwitchThemeData(
       thumbColor: thumbColor ?? this.thumbColor,
       trackColor: trackColor ?? this.trackColor,
+      trackOutlineColor: trackOutlineColor ?? this.trackOutlineColor,
       materialTapTargetSize: materialTapTargetSize ?? this.materialTapTargetSize,
       mouseCursor: mouseCursor ?? this.mouseCursor,
       overlayColor: overlayColor ?? this.overlayColor,
@@ -111,6 +119,7 @@ class SwitchThemeData with Diagnosticable {
     return SwitchThemeData(
       thumbColor: MaterialStateProperty.lerp<Color?>(a?.thumbColor, b?.thumbColor, t, Color.lerp),
       trackColor: MaterialStateProperty.lerp<Color?>(a?.trackColor, b?.trackColor, t, Color.lerp),
+      trackOutlineColor: MaterialStateProperty.lerp<Color?>(a?.trackOutlineColor, b?.trackOutlineColor, t, Color.lerp),
       materialTapTargetSize: t < 0.5 ? a?.materialTapTargetSize : b?.materialTapTargetSize,
       mouseCursor: t < 0.5 ? a?.mouseCursor : b?.mouseCursor,
       overlayColor: MaterialStateProperty.lerp<Color?>(a?.overlayColor, b?.overlayColor, t, Color.lerp),
@@ -123,6 +132,7 @@ class SwitchThemeData with Diagnosticable {
   int get hashCode => Object.hash(
     thumbColor,
     trackColor,
+    trackOutlineColor,
     materialTapTargetSize,
     mouseCursor,
     overlayColor,
@@ -141,6 +151,7 @@ class SwitchThemeData with Diagnosticable {
     return other is SwitchThemeData
       && other.thumbColor == thumbColor
       && other.trackColor == trackColor
+      && other.trackOutlineColor == trackOutlineColor
       && other.materialTapTargetSize == materialTapTargetSize
       && other.mouseCursor == mouseCursor
       && other.overlayColor == overlayColor
@@ -153,6 +164,7 @@ class SwitchThemeData with Diagnosticable {
     super.debugFillProperties(properties);
     properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('thumbColor', thumbColor, defaultValue: null));
     properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('trackColor', trackColor, defaultValue: null));
+    properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('trackOutlineColor', trackOutlineColor, defaultValue: null));
     properties.add(DiagnosticsProperty<MaterialTapTargetSize>('materialTapTargetSize', materialTapTargetSize, defaultValue: null));
     properties.add(DiagnosticsProperty<MaterialStateProperty<MouseCursor?>>('mouseCursor', mouseCursor, defaultValue: null));
     properties.add(DiagnosticsProperty<MaterialStateProperty<Color?>>('overlayColor', overlayColor, defaultValue: null));

packages/flutter/test/material/switch_list_tile_test.dart

@@ -618,4 +618,117 @@ void main() {
           )
     );
   });
+
+  testWidgets('SwitchListTile respects trackOutlineColor in active/enabled states', (WidgetTester tester) async {
+    const Color activeEnabledTrackOutlineColor = Color(0xFF000001);
+    const Color activeDisabledTrackOutlineColor = Color(0xFF000002);
+    const Color inactiveEnabledTrackOutlineColor = Color(0xFF000003);
+    const Color inactiveDisabledTrackOutlineColor = Color(0xFF000004);
+
+    Color getOutlineColor(Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        if (states.contains(MaterialState.selected)) {
+          return activeDisabledTrackOutlineColor;
+        }
+        return inactiveDisabledTrackOutlineColor;
+      }
+      if (states.contains(MaterialState.selected)) {
+        return activeEnabledTrackOutlineColor;
+      }
+      return inactiveEnabledTrackOutlineColor;
+    }
+
+    final MaterialStateProperty<Color> trackOutlineColor = MaterialStateColor.resolveWith(getOutlineColor);
+
+    Widget buildSwitchListTile({required bool enabled, required bool selected}) {
+      return wrap(
+        child: StatefulBuilder(
+            builder: (BuildContext context, StateSetter setState) {
+              return SwitchListTile(
+                value: selected,
+                trackOutlineColor: trackOutlineColor,
+                onChanged: enabled ? (_) { } : null,
+              );
+            }),
+      );
+    }
+
+    await tester.pumpWidget(buildSwitchListTile(enabled: false, selected: false));
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints..rrect(style: PaintingStyle.fill)
+        ..rrect(color: inactiveDisabledTrackOutlineColor, style: PaintingStyle.stroke),
+    );
+
+    await tester.pumpWidget(buildSwitchListTile(enabled: false, selected: true));
+    await tester.pumpAndSettle();
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints..rrect(style: PaintingStyle.fill)
+        ..rrect(color: activeDisabledTrackOutlineColor, style: PaintingStyle.stroke),
+    );
+
+    await tester.pumpWidget(buildSwitchListTile(enabled: true, selected: false));
+    await tester.pumpAndSettle();
+
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints..rrect(style: PaintingStyle.fill)
+        ..rrect(color: inactiveEnabledTrackOutlineColor, style: PaintingStyle.stroke),
+    );
+
+    await tester.pumpWidget(buildSwitchListTile(enabled: true, selected: true));
+    await tester.pumpAndSettle();
+
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints..rrect(style: PaintingStyle.fill)
+        ..rrect(color: activeEnabledTrackOutlineColor, style: PaintingStyle.stroke),
+    );
+  });
+
+  testWidgets('SwitchListTile respects trackOutlineColor in hovered state', (WidgetTester tester) async {
+    tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+    const Color hoveredTrackColor = Color(0xFF4caf50);
+
+    Color getTrackOutlineColor(Set<MaterialState> states) {
+      if (states.contains(MaterialState.hovered)) {
+        return hoveredTrackColor;
+      }
+      return Colors.transparent;
+    }
+
+    final MaterialStateProperty<Color> outlineColor = MaterialStateColor.resolveWith(getTrackOutlineColor);
+
+    Widget buildSwitchListTile() {
+      return MaterialApp(
+        theme: ThemeData(),
+        home: wrap(
+          child: StatefulBuilder(
+              builder: (BuildContext context, StateSetter setState) {
+                return SwitchListTile(
+                  value: false,
+                  trackOutlineColor: outlineColor,
+                  onChanged: (_) { },
+                );
+              }),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildSwitchListTile());
+    await tester.pumpAndSettle();
+
+    // Start hovering
+    final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
+    await gesture.moveTo(tester.getCenter(find.byType(Switch)));
+
+    await tester.pumpAndSettle();
+
+    expect(
+      Material.of(tester.element(find.byType(Switch))),
+      paints..rrect()..rrect(color: hoveredTrackColor, style: PaintingStyle.stroke)
+    );
+  });
 }

packages/flutter/test/material/switch_test.dart

@@ -405,20 +405,16 @@ void main() {
 
   testWidgets('Switch has default colors when disabled', (WidgetTester tester) async {
     await tester.pumpWidget(
-      Directionality(
+      const Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Material(
-          builder: (BuildContext context, StateSetter setState) {
+          child: Center(
-            return const Material(
+            child: Switch(
-              child: Center(
+              value: false,
-                child: Switch(
+              onChanged: null,
-                  value: false,
+            ),
-                  onChanged: null,
+          ),
-                ),
+        )
-              ),
-            );
-          },
-        ),
       ),
     );
 
@@ -437,19 +433,15 @@ void main() {
     );
 
     await tester.pumpWidget(
-      Directionality(
+      const Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Material(
-          builder: (BuildContext context, StateSetter setState) {
+          child: Center(
-            return const Material(
+            child: Switch(
-              child: Center(
+              value: true,
-                child: Switch(
+              onChanged: null,
-                  value: true,
+            ),
-                  onChanged: null,
+          ),
-                ),
-              ),
-            );
-          },
         ),
       ),
     );
@@ -891,15 +883,13 @@ void main() {
         theme: theme,
         home: Material(
           child: Center(
-            child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
+            child: Switch(
-              return Switch(
+              value: true,
-                value: true,
+              onChanged: (bool newValue) {},
-                onChanged: (bool newValue) {},
+              focusColor: Colors.orange[500],
-                focusColor: Colors.orange[500],
+              autofocus: true,
-                autofocus: true,
+              splashRadius: splashRadius,
-                splashRadius: splashRadius,
+            ),
-              );
-            }),
           ),
         ),
       );
@@ -1204,18 +1194,14 @@ void main() {
     Widget buildSwitch({required bool enabled, required bool active}) {
       return Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Material(
-          builder: (BuildContext context, StateSetter setState) {
+          child: Center(
-            return Material(
+            child: Switch(
-              child: Center(
+              thumbColor: thumbColor,
-                child: Switch(
+              value: active,
-                  thumbColor: thumbColor,
+              onChanged: enabled ? (_) { } : null,
-                  value: active,
+            ),
-                  onChanged: enabled ? (_) { } : null,
+          ),
-                ),
-              ),
-            );
-          },
         ),
       );
     }
@@ -1310,20 +1296,16 @@ void main() {
     Widget buildSwitch() {
       return Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Material(
-          builder: (BuildContext context, StateSetter setState) {
+          child: Center(
-            return Material(
+            child: Switch(
-              child: Center(
+              focusNode: focusNode,
-                child: Switch(
+              autofocus: true,
-                  focusNode: focusNode,
+              value: true,
-                  autofocus: true,
+              thumbColor: thumbColor,
-                  value: true,
+              onChanged: (_) { },
-                  thumbColor: thumbColor,
+            ),
-                  onChanged: (_) { },
+          ),
-                ),
-              ),
-            );
-          },
         ),
       );
     }
@@ -1393,18 +1375,14 @@ void main() {
     Widget buildSwitch({required bool enabled, required bool active}) {
       return Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Material(
-          builder: (BuildContext context, StateSetter setState) {
+          child: Center(
-            return Material(
+            child: Switch(
-              child: Center(
+              trackColor: trackColor,
-                child: Switch(
+              value: active,
-                  trackColor: trackColor,
+              onChanged: enabled ? (_) { } : null,
-                  value: active,
+            ),
-                  onChanged: enabled ? (_) { } : null,
+          ),
-                ),
-              ),
-            );
-          },
         ),
       );
     }
@@ -1483,20 +1461,16 @@ void main() {
     Widget buildSwitch() {
       return Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Material(
-          builder: (BuildContext context, StateSetter setState) {
+          child: Center(
-            return Material(
+            child: Switch(
-              child: Center(
+              focusNode: focusNode,
-                child: Switch(
+              autofocus: true,
-                  focusNode: focusNode,
+              value: true,
-                  autofocus: true,
+              trackColor: trackColor,
-                  value: true,
+              onChanged: (_) { },
-                  trackColor: trackColor,
+            ),
-                  onChanged: (_) { },
+          ),
-                ),
-              ),
-            );
-          },
         ),
       );
     }
@@ -1548,21 +1522,17 @@ void main() {
     Widget buildSwitch({required bool enabled, required bool active}) {
       return Directionality(
         textDirection: TextDirection.rtl,
-        child: StatefulBuilder(
+        child: Theme(
-          builder: (BuildContext context, StateSetter setState) {
+          data: theme,
-            return Theme(
+          child: Material(
-              data: theme,
+            child: Center(
-              child: Material(
+              child: Switch(
-                child: Center(
+                thumbColor: thumbColor,
-                  child: Switch(
+                value: active,
-                    thumbColor: thumbColor,
+                onChanged: enabled ? (_) { } : null,
-                    value: active,
-                    onChanged: enabled ? (_) { } : null,
-                  ),
-                ),
               ),
-            );
+            ),
-          },
+          ),
         ),
       );
     }
@@ -2140,19 +2110,15 @@ void main() {
 
       await tester.pumpWidget(MaterialApp(
         theme: themeData,
-        home: Directionality(
+        home: const Directionality(
           textDirection: TextDirection.rtl,
-          child: StatefulBuilder(
+          child: Material(
-            builder: (BuildContext context, StateSetter setState) {
+            child: Center(
-              return const Material(
+              child: Switch(
-                child: Center(
+                value: false,
-                  child: Switch(
+                onChanged: null,
-                    value: false,
+              ),
-                    onChanged: null,
+            ),
-                  ),
-                ),
-              );
-            },
           ),
         ),
       ));
@@ -2183,19 +2149,15 @@ void main() {
       final ColorScheme colors = themeData.colorScheme;
       await tester.pumpWidget(MaterialApp(
         theme: themeData,
-        home: Directionality(
+        home: const Directionality(
           textDirection: TextDirection.rtl,
-          child: StatefulBuilder(
+          child: Material(
-            builder: (BuildContext context, StateSetter setState) {
+            child: Center(
-              return const Material(
+              child: Switch(
-                child: Center(
+                value: true,
-                  child: Switch(
+                onChanged: null,
-                    value: true,
+              ),
-                    onChanged: null,
+            ),
-                  ),
-                ),
-              );
-            },
           ),
         ),
       ));
@@ -2550,18 +2512,14 @@ void main() {
           data: themeData,
           child: Directionality(
             textDirection: TextDirection.rtl,
-            child: StatefulBuilder(
+            child: Material(
-              builder: (BuildContext context, StateSetter setState) {
+              child: Center(
-                return Material(
+                child: Switch(
-                  child: Center(
+                  thumbColor: thumbColor,
-                    child: Switch(
+                  value: active,
-                      thumbColor: thumbColor,
+                  onChanged: enabled ? (_) { } : null,
-                      value: active,
+                ),
-                      onChanged: enabled ? (_) { } : null,
+              ),
-                    ),
-                  ),
-                );
-              },
             ),
           ),
         );
@@ -2660,20 +2618,16 @@ void main() {
           theme: themeData,
           home: Directionality(
             textDirection: TextDirection.rtl,
-            child: StatefulBuilder(
+            child: Material(
-              builder: (BuildContext context, StateSetter setState) {
+              child: Center(
-                return Material(
+                child: Switch(
-                  child: Center(
+                  focusNode: focusNode,
-                    child: Switch(
+                  autofocus: true,
-                      focusNode: focusNode,
+                  value: true,
-                      autofocus: true,
+                  thumbColor: thumbColor,
-                      value: true,
+                  onChanged: (_) { },
-                      thumbColor: thumbColor,
+                ),
-                      onChanged: (_) { },
+              ),
-                    ),
-                  ),
-                );
-              },
             ),
           ),
         );
@@ -2743,18 +2697,14 @@ void main() {
           data: themeData,
           child: Directionality(
             textDirection: TextDirection.rtl,
-            child: StatefulBuilder(
+            child: Material(
-              builder: (BuildContext context, StateSetter setState) {
+              child: Center(
-                return Material(
+                child: Switch(
-                  child: Center(
+                  trackColor: trackColor,
-                    child: Switch(
+                  value: active,
-                      trackColor: trackColor,
+                  onChanged: enabled ? (_) { } : null,
-                      value: active,
+                ),
-                      onChanged: enabled ? (_) { } : null,
+              ),
-                    ),
-                  ),
-                );
-              },
             ),
           ),
         );
@@ -2837,20 +2787,16 @@ void main() {
           data: themeData,
           child: Directionality(
             textDirection: TextDirection.rtl,
-            child: StatefulBuilder(
+            child: Material(
-              builder: (BuildContext context, StateSetter setState) {
+              child: Center(
-                return Material(
+                child: Switch(
-                  child: Center(
+                  focusNode: focusNode,
-                    child: Switch(
+                  autofocus: true,
-                      focusNode: focusNode,
+                  value: true,
-                      autofocus: true,
+                  trackColor: trackColor,
-                      value: true,
+                  onChanged: (_) { },
-                      trackColor: trackColor,
+                ),
-                      onChanged: (_) { },
+              ),
-                    ),
-                  ),
-                );
-              },
             ),
           ),
         );
@@ -2886,6 +2832,141 @@ void main() {
       );
     });
 
+    testWidgets('Track outline color resolves in active/enabled states', (WidgetTester tester) async {
+      const Color activeEnabledTrackOutlineColor = Color(0xFF000001);
+      const Color activeDisabledTrackOutlineColor = Color(0xFF000002);
+      const Color inactiveEnabledTrackOutlineColor = Color(0xFF000003);
+      const Color inactiveDisabledTrackOutlineColor = Color(0xFF000004);
+
+      Color getTrackOutlineColor(Set<MaterialState> states) {
+        if (states.contains(MaterialState.disabled)) {
+          if (states.contains(MaterialState.selected)) {
+            return activeDisabledTrackOutlineColor;
+          }
+          return inactiveDisabledTrackOutlineColor;
+        }
+        if (states.contains(MaterialState.selected)) {
+          return activeEnabledTrackOutlineColor;
+        }
+        return inactiveEnabledTrackOutlineColor;
+      }
+
+      final MaterialStateProperty<Color> trackOutlineColor = MaterialStateColor.resolveWith(getTrackOutlineColor);
+
+      Widget buildSwitch({required bool enabled, required bool active}) {
+        return Directionality(
+          textDirection: TextDirection.rtl,
+          child: Material(
+            child: Center(
+              child: Switch(
+                trackOutlineColor: trackOutlineColor,
+                value: active,
+                onChanged: enabled ? (_) { } : null,
+              ),
+            ),
+          ),
+        );
+      }
+
+      await tester.pumpWidget(buildSwitch(enabled: false, active: false));
+
+      expect(
+        Material.of(tester.element(find.byType(Switch))),
+        paints..rrect(style: PaintingStyle.fill)
+          ..rrect(color: inactiveDisabledTrackOutlineColor, style: PaintingStyle.stroke),
+        reason: 'Inactive disabled switch track outline should use this value',
+      );
+
+      await tester.pumpWidget(buildSwitch(enabled: false, active: true));
+      await tester.pumpAndSettle();
+
+      expect(
+        Material.of(tester.element(find.byType(Switch))),
+        paints..rrect(style: PaintingStyle.fill)
+          ..rrect(color: activeDisabledTrackOutlineColor, style: PaintingStyle.stroke),
+        reason: 'Active disabled switch track outline should match these colors',
+      );
+
+      await tester.pumpWidget(buildSwitch(enabled: true, active: false));
+      await tester.pumpAndSettle();
+
+      expect(
+        Material.of(tester.element(find.byType(Switch))),
+        paints..rrect(style: PaintingStyle.fill)
+          ..rrect(color: inactiveEnabledTrackOutlineColor),
+        reason: 'Inactive enabled switch track outline should match these colors',
+      );
+
+      await tester.pumpWidget(buildSwitch(enabled: true, active: true));
+      await tester.pumpAndSettle();
+
+      expect(
+        Material.of(tester.element(find.byType(Switch))),
+        paints..rrect(style: PaintingStyle.fill)
+          ..rrect(color: activeEnabledTrackOutlineColor),
+        reason: 'Active enabled switch track outline should match these colors',
+      );
+    });
+
+    testWidgets('Switch track outline color resolves in hovered/focused states', (WidgetTester tester) async {
+      final FocusNode focusNode = FocusNode(debugLabel: 'Switch');
+      tester.binding.focusManager.highlightStrategy = FocusHighlightStrategy.alwaysTraditional;
+      const Color hoveredTrackOutlineColor = Color(0xFF000001);
+      const Color focusedTrackOutlineColor = Color(0xFF000002);
+
+      Color getTrackOutlineColor(Set<MaterialState> states) {
+        if (states.contains(MaterialState.hovered)) {
+          return hoveredTrackOutlineColor;
+        }
+        if (states.contains(MaterialState.focused)) {
+          return focusedTrackOutlineColor;
+        }
+        return Colors.transparent;
+      }
+
+      final MaterialStateProperty<Color> trackOutlineColor = MaterialStateColor.resolveWith(getTrackOutlineColor);
+
+      Widget buildSwitch() {
+        return Directionality(
+          textDirection: TextDirection.rtl,
+          child: Material(
+            child: Center(
+              child: Switch(
+                focusNode: focusNode,
+                autofocus: true,
+                value: true,
+                trackOutlineColor: trackOutlineColor,
+                onChanged: (_) { },
+              ),
+            ),
+          ),
+        );
+      }
+
+      await tester.pumpWidget(buildSwitch());
+      await tester.pumpAndSettle();
+      expect(focusNode.hasPrimaryFocus, isTrue);
+      expect(
+        Material.of(tester.element(find.byType(Switch))),
+        paints..rrect(style: PaintingStyle.fill)
+          ..rrect(color: focusedTrackOutlineColor, style: PaintingStyle.stroke),
+        reason: 'Active enabled switch track outline should match this color',
+      );
+
+      // Start hovering
+      final TestGesture gesture = await tester.createGesture(kind: PointerDeviceKind.mouse);
+      await gesture.addPointer();
+      await gesture.moveTo(tester.getCenter(find.byType(Switch)));
+      await tester.pumpAndSettle();
+
+      expect(
+        Material.of(tester.element(find.byType(Switch))),
+        paints..rrect(style: PaintingStyle.fill)
+          ..rrect(color: hoveredTrackOutlineColor, style: PaintingStyle.stroke),
+        reason: 'Active enabled switch track outline should match this color',
+      );
+    });
+
     testWidgets('Switch thumb color is blended against surface color - M3', (WidgetTester tester) async {
       final Color activeDisabledThumbColor = Colors.blue.withOpacity(.60);
       final ThemeData theme = ThemeData.light(useMaterial3: true);
@@ -2904,21 +2985,17 @@ void main() {
       Widget buildSwitch({required bool enabled, required bool active}) {
         return Directionality(
           textDirection: TextDirection.rtl,
-          child: StatefulBuilder(
+          child: Theme(
-            builder: (BuildContext context, StateSetter setState) {
+            data: theme,
-              return Theme(
+            child: Material(
-                data: theme,
+              child: Center(
-                child: Material(
+                child: Switch(
-                  child: Center(
+                  thumbColor: thumbColor,
-                    child: Switch(
+                  value: active,
-                      thumbColor: thumbColor,
+                  onChanged: enabled ? (_) { } : null,
-                      value: active,
-                      onChanged: enabled ? (_) { } : null,
-                    ),
-                  ),
                 ),
-              );
+              ),
-            },
+            ),
           ),
         );
       }
@@ -2959,18 +3036,14 @@ void main() {
           data: themeData,
           child: Directionality(
             textDirection: TextDirection.ltr,
-            child: StatefulBuilder(
+            child: Material(
-              builder: (BuildContext context, StateSetter setState) {
+              child: Center(
-                return Material(
+                child: Switch(
-                  child: Center(
+                  thumbIcon: thumbIcon(activeIcon, inactiveIcon),
-                    child: Switch(
+                  value: active,
-                      thumbIcon: thumbIcon(activeIcon, inactiveIcon),
+                  onChanged: enabled ? (_) {} : null,
-                      value: active,
+                ),
-                      onChanged: enabled ? (_) {} : null,
+              ),
-                    ),
-                  ),
-                );
-              },
             ),
           ),
         );

packages/flutter/test/material/switch_theme_test.dart

@@ -19,6 +19,7 @@ void main() {
     const SwitchThemeData themeData = SwitchThemeData();
     expect(themeData.thumbColor, null);
     expect(themeData.trackColor, null);
+    expect(themeData.trackOutlineColor, null);
     expect(themeData.mouseCursor, null);
     expect(themeData.materialTapTargetSize, null);
     expect(themeData.overlayColor, null);
@@ -28,6 +29,7 @@ void main() {
     const SwitchTheme theme = SwitchTheme(data: SwitchThemeData(), child: SizedBox());
     expect(theme.data.thumbColor, null);
     expect(theme.data.trackColor, null);
+    expect(theme.data.trackOutlineColor, null);
     expect(theme.data.mouseCursor, null);
     expect(theme.data.materialTapTargetSize, null);
     expect(theme.data.overlayColor, null);
@@ -52,6 +54,7 @@ void main() {
     const SwitchThemeData(
       thumbColor: MaterialStatePropertyAll<Color>(Color(0xfffffff0)),
       trackColor: MaterialStatePropertyAll<Color>(Color(0xfffffff1)),
+      trackOutlineColor: MaterialStatePropertyAll<Color>(Color(0xfffffff3)),
       mouseCursor: MaterialStatePropertyAll<MouseCursor>(SystemMouseCursors.click),
       materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
       overlayColor: MaterialStatePropertyAll<Color>(Color(0xfffffff2)),
@@ -66,11 +69,12 @@ void main() {
 
     expect(description[0], 'thumbColor: MaterialStatePropertyAll(Color(0xfffffff0))');
     expect(description[1], 'trackColor: MaterialStatePropertyAll(Color(0xfffffff1))');
-    expect(description[2], 'materialTapTargetSize: MaterialTapTargetSize.shrinkWrap');
+    expect(description[2], 'trackOutlineColor: MaterialStatePropertyAll(Color(0xfffffff3))');
-    expect(description[3], 'mouseCursor: MaterialStatePropertyAll(SystemMouseCursor(click))');
+    expect(description[3], 'materialTapTargetSize: MaterialTapTargetSize.shrinkWrap');
-    expect(description[4], 'overlayColor: MaterialStatePropertyAll(Color(0xfffffff2))');
+    expect(description[4], 'mouseCursor: MaterialStatePropertyAll(SystemMouseCursor(click))');
-    expect(description[5], 'splashRadius: 1.0');
+    expect(description[5], 'overlayColor: MaterialStatePropertyAll(Color(0xfffffff2))');
-    expect(description[6], 'thumbIcon: MaterialStatePropertyAll(Icon(IconData(U+0007B)))');
+    expect(description[6], 'splashRadius: 1.0');
+    expect(description[7], 'thumbIcon: MaterialStatePropertyAll(Icon(IconData(U+0007B)))');
   });
 
   testWidgets('Switch is themeable', (WidgetTester tester) async {
@@ -80,6 +84,8 @@ void main() {
     const Color selectedThumbColor = Color(0xfffffff1);
     const Color defaultTrackColor = Color(0xfffffff2);
     const Color selectedTrackColor = Color(0xfffffff3);
+    const Color defaultTrackOutlineColor = Color(0xfffffff4);
+    const Color selectedTrackOutlineColor = Color(0xfffffff5);
     const MouseCursor mouseCursor = SystemMouseCursors.text;
     const MaterialTapTargetSize materialTapTargetSize = MaterialTapTargetSize.shrinkWrap;
     const Color focusOverlayColor = Color(0xfffffff4);
@@ -89,7 +95,6 @@ void main() {
     const Icon icon2 = Icon(Icons.close);
 
     final ThemeData themeData = ThemeData(
-      useMaterial3: true,
       switchTheme: SwitchThemeData(
         thumbColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
           if (states.contains(MaterialState.selected)) {
@@ -103,6 +108,12 @@ void main() {
           }
           return defaultTrackColor;
         }),
+        trackOutlineColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+          if (states.contains(MaterialState.selected)) {
+            return selectedTrackOutlineColor;
+          }
+          return defaultTrackOutlineColor;
+        }),
         mouseCursor: const MaterialStatePropertyAll<MouseCursor>(mouseCursor),
         materialTapTargetSize: materialTapTargetSize,
         overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -146,12 +157,13 @@ void main() {
       material3
       ? (paints
         ..rrect(color: defaultTrackColor)
-        ..rrect(color: themeData.colorScheme.outline)
+        ..rrect(color: defaultTrackOutlineColor)
         ..rrect(color: defaultThumbColor)
         ..paragraph()
       )
       : (paints
         ..rrect(color: defaultTrackColor)
+        ..rrect(color: defaultTrackOutlineColor)
         ..rrect()
         ..rrect()
         ..rrect()
@@ -168,10 +180,12 @@ void main() {
       _getSwitchMaterial(tester),
       material3
       ? (paints
-        ..rrect(color: selectedTrackColor)..rrect()
+        ..rrect(color: selectedTrackColor)
+        ..rrect(color: selectedTrackOutlineColor)
         ..rrect(color: selectedThumbColor)..paragraph())
       : (paints
         ..rrect(color: selectedTrackColor)
+        ..rrect(color: selectedTrackOutlineColor)
         ..rrect()
         ..rrect()
         ..rrect()
@@ -198,6 +212,8 @@ void main() {
     const Color themeSelectedThumbColor = Color(0xfffffff1);
     const Color themeDefaultTrackColor = Color(0xfffffff2);
     const Color themeSelectedTrackColor = Color(0xfffffff3);
+    const Color themeDefaultOutlineColor = Color(0xfffffff6);
+    const Color themeSelectedOutlineColor = Color(0xfffffff7);
     const MouseCursor themeMouseCursor = SystemMouseCursors.click;
     const MaterialTapTargetSize themeMaterialTapTargetSize = MaterialTapTargetSize.padded;
     const Color themeFocusOverlayColor = Color(0xfffffff4);
@@ -208,6 +224,8 @@ void main() {
     const Color selectedThumbColor = Color(0xffffff1f);
     const Color defaultTrackColor = Color(0xffffff2f);
     const Color selectedTrackColor = Color(0xffffff3f);
+    const Color defaultOutlineColor = Color(0xffffff6f);
+    const Color selectedOutlineColor = Color(0xffffff7f);
     const MouseCursor mouseCursor = SystemMouseCursors.text;
     const MaterialTapTargetSize materialTapTargetSize = MaterialTapTargetSize.shrinkWrap;
     const Color focusColor = Color(0xffffff4f);
@@ -228,6 +246,12 @@ void main() {
           }
           return themeDefaultTrackColor;
         }),
+        trackOutlineColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+          if (states.contains(MaterialState.selected)) {
+            return themeSelectedOutlineColor;
+          }
+          return themeDefaultOutlineColor;
+        }),
         mouseCursor: const MaterialStatePropertyAll<MouseCursor>(themeMouseCursor),
         materialTapTargetSize: themeMaterialTapTargetSize,
         overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -270,6 +294,12 @@ void main() {
               }
               return defaultTrackColor;
             }),
+            trackOutlineColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+              if (states.contains(MaterialState.selected)) {
+                return selectedOutlineColor;
+              }
+              return defaultOutlineColor;
+            }),
             mouseCursor: mouseCursor,
             materialTapTargetSize: materialTapTargetSize,
             focusColor: focusColor,
@@ -294,10 +324,11 @@ void main() {
       material3
       ? (paints
         ..rrect(color: defaultTrackColor)
-        ..rrect(color: themeData.colorScheme.outline)
+        ..rrect(color: defaultOutlineColor)
         ..rrect(color: defaultThumbColor)..paragraph(offset: const Offset(12, 16)))
       : (paints
         ..rrect(color: defaultTrackColor)
+        ..rrect(color: defaultOutlineColor)
         ..rrect()
         ..rrect()
         ..rrect()
@@ -313,10 +344,11 @@ void main() {
       _getSwitchMaterial(tester),
       material3
       ? (paints
-        ..rrect(color: selectedTrackColor)
+        ..rrect(color: selectedTrackColor)..rrect(color: selectedOutlineColor)
         ..rrect(color: selectedThumbColor))
       : (paints
         ..rrect(color: selectedTrackColor)
+        ..rrect(color: selectedOutlineColor)
         ..rrect()
         ..rrect()
         ..rrect()
@@ -496,13 +528,16 @@ void main() {
   testWidgets('Local SwitchTheme can override global SwitchTheme', (WidgetTester tester) async {
     const Color globalThemeThumbColor = Color(0xfffffff1);
     const Color globalThemeTrackColor = Color(0xfffffff2);
+    const Color globalThemeOutlineColor = Color(0xfffffff3);
     const Color localThemeThumbColor = Color(0xffff0000);
     const Color localThemeTrackColor = Color(0xffff0000);
+    const Color localThemeOutlineColor = Color(0xffff0000);
 
     final ThemeData themeData = ThemeData(
       switchTheme: const SwitchThemeData(
         thumbColor: MaterialStatePropertyAll<Color>(globalThemeThumbColor),
         trackColor: MaterialStatePropertyAll<Color>(globalThemeTrackColor),
+        trackOutlineColor: MaterialStatePropertyAll<Color>(globalThemeOutlineColor),
       ),
     );
     final bool material3 = themeData.useMaterial3;
@@ -514,6 +549,7 @@ void main() {
             data: const SwitchThemeData(
               thumbColor: MaterialStatePropertyAll<Color>(localThemeThumbColor),
               trackColor: MaterialStatePropertyAll<Color>(localThemeTrackColor),
+              trackOutlineColor: MaterialStatePropertyAll<Color>(localThemeOutlineColor),
             ),
             child: Switch(
               value: selected,
@@ -532,9 +568,11 @@ void main() {
       material3
       ? (paints
         ..rrect(color: localThemeTrackColor)
+        ..rrect(color: localThemeOutlineColor)
         ..rrect(color: localThemeThumbColor))
       : (paints
         ..rrect(color: localThemeTrackColor)
+        ..rrect(color: localThemeOutlineColor)
         ..rrect()
         ..rrect()
         ..rrect()