Added `Switch` Animation for Material 3 (#113090)

dev/tools/gen_defaults/lib/switch_template.dart

@@ -202,6 +202,18 @@ class _SwitchConfigM3 with _SwitchConfig {
 
   @override
   double get trackWidth => ${tokens['md.comp.switch.track.width']};
+
+  // The thumb size at the middle of the track. Hand coded default based on the animation specs.
+  @override
+  Size get transitionalThumbSize => const Size(34, 22);
+
+  // Hand coded default based on the animation specs.
+  @override
+  int get toggleDuration => 300;
+
+  // Hand coded default based on the animation specs.
+  @override
+  double? get thumbOffset => null;
 }
 ''';
 

packages/flutter/test/material/switch_list_tile_test.dart

@@ -148,10 +148,10 @@ void main() {
       find.byType(Switch),
       paints
         ..rrect(color: Colors.blue[500])
-        ..circle(color: const Color(0x33000000))
-        ..circle(color: const Color(0x24000000))
-        ..circle(color: const Color(0x1f000000))
-        ..circle(color: Colors.yellow[500]),
+        ..rrect(color: const Color(0x33000000))
+        ..rrect(color: const Color(0x24000000))
+        ..rrect(color: const Color(0x1f000000))
+        ..rrect(color: Colors.yellow[500]),
     );
 
     await tester.tap(find.byType(Switch));
@@ -161,10 +161,10 @@ void main() {
       Material.of(tester.element(find.byType(Switch))),
       paints
         ..rrect(color: Colors.green[500])
-        ..circle(color: const Color(0x33000000))
-        ..circle(color: const Color(0x24000000))
-        ..circle(color: const Color(0x1f000000))
-        ..circle(color: Colors.red[500]),
+        ..rrect(color: const Color(0x33000000))
+        ..rrect(color: const Color(0x24000000))
+        ..rrect(color: const Color(0x1f000000))
+        ..rrect(color: Colors.red[500]),
     );
   });
 

packages/flutter/test/material/switch_theme_test.dart

@@ -147,15 +147,15 @@ void main() {
       ? (paints
         ..rrect(color: defaultTrackColor)
         ..rrect(color: themeData.colorScheme.outline)
-        ..circle(color: defaultThumbColor)
+        ..rrect(color: defaultThumbColor)
         ..paragraph()
       )
       : (paints
         ..rrect(color: defaultTrackColor)
-        ..circle()
-        ..circle()
-        ..circle()
-        ..circle(color: defaultThumbColor)
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(color: defaultThumbColor)
       )
     );
     // Size from MaterialTapTargetSize.shrinkWrap.
@@ -168,14 +168,14 @@ void main() {
       _getSwitchMaterial(tester),
       material3
       ? (paints
-        ..rrect(color: selectedTrackColor)
-        ..circle(color: selectedThumbColor)..paragraph())
+        ..rrect(color: selectedTrackColor)..rrect()
+        ..rrect(color: selectedThumbColor)..paragraph())
       : (paints
         ..rrect(color: selectedTrackColor)
-        ..circle()
-        ..circle()
-        ..circle()
-        ..circle(color: selectedThumbColor))
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(color: selectedThumbColor))
     );
 
     // Switch with hover.
@@ -295,13 +295,13 @@ void main() {
       ? (paints
         ..rrect(color: defaultTrackColor)
         ..rrect(color: themeData.colorScheme.outline)
-        ..circle(color: defaultThumbColor)..paragraph(offset: const Offset(12, 16)))
+        ..rrect(color: defaultThumbColor)..paragraph(offset: const Offset(12, 16)))
       : (paints
         ..rrect(color: defaultTrackColor)
-        ..circle()
-        ..circle()
-        ..circle()
-        ..circle(color: defaultThumbColor))
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(color: defaultThumbColor))
     );
     // Size from MaterialTapTargetSize.shrinkWrap.
     expect(tester.getSize(find.byType(Switch)), material3 ? const Size(60.0, 40.0) : const Size(59.0, 40.0));
@@ -314,13 +314,13 @@ void main() {
       material3
       ? (paints
         ..rrect(color: selectedTrackColor)
-        ..circle(color: selectedThumbColor))
+        ..rrect(color: selectedThumbColor))
       : (paints
         ..rrect(color: selectedTrackColor)
-        ..circle()
-        ..circle()
-        ..circle()
-        ..circle(color: selectedThumbColor))
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(color: selectedThumbColor))
     );
 
     // Switch with hover.
@@ -393,13 +393,13 @@ void main() {
         ? (paints
           ..rrect(color: defaultTrackColor)
           ..rrect(color: themeData.colorScheme.outline)
-          ..circle(color: defaultThumbColor))
+          ..rrect(color: defaultThumbColor))
         : (paints
           ..rrect(color: defaultTrackColor)
-          ..circle()
-          ..circle()
-          ..circle()
-          ..circle(color: defaultThumbColor))
+          ..rrect()
+          ..rrect()
+          ..rrect()
+          ..rrect(color: defaultThumbColor))
     );
 
     // Selected switch.
@@ -410,13 +410,13 @@ void main() {
       material3
       ? (paints
         ..rrect(color: selectedTrackColor)
-        ..circle(color: selectedThumbColor))
+        ..rrect(color: selectedThumbColor))
       : (paints
         ..rrect(color: selectedTrackColor)
-        ..circle()
-        ..circle()
-        ..circle()
-        ..circle(color: selectedThumbColor))
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(color: selectedThumbColor))
     );
   });
 
@@ -532,13 +532,13 @@ void main() {
       material3
       ? (paints
         ..rrect(color: localThemeTrackColor)
-        ..circle(color: localThemeThumbColor))
+        ..rrect(color: localThemeThumbColor))
       : (paints
         ..rrect(color: localThemeTrackColor)
-        ..circle()
-        ..circle()
-        ..circle()
-        ..circle(color: localThemeThumbColor))
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(color: localThemeThumbColor))
     );
   });
 }