Fix M3 TimePicker dial background uses incorrect color (#131045)

fixes [Material3: TimePicker clock dial use wrong spec color and its web spec has a mistake](https://github.com/flutter/flutter/issues/118657)

### Description 

This PR fixes the default color used for the Material 3 dial background.

### Code sample

<details> 
<summary>expand to view the code sample</summary> 

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = ThemeData(useMaterial3: true);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // theme: theme,
      theme: theme.copyWith(
        colorScheme: theme.colorScheme.copyWith(
          surfaceVariant: const Color(0xffffbf00),
        ),
      ),
      home: const Example(),
    );
  }
}

class Example extends StatelessWidget {
  const Example({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showTimePicker(
              context: context,
              initialTime: TimeOfDay.now(),
            );
          },
          child: const Text('Open Time Picker'),
        ),
      ),
    );
  }
}
``` 
	
</details>

### Default dial background color 
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/59514586-60c6-489f-b024-f659a26fa1e7"  /> | <img src="https://github.com/flutter/flutter/assets/48603081/75c3c360-df2b-47c8-8187-136ff6d963b6"  /> |

### Custom color scheme
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/666dd2fc-7ee2-4268-9af0-923019adfccd"  /> | <img src="https://github.com/flutter/flutter/assets/48603081/f32dc39e-a43f-4a63-a6e4-9df479b723ed"  /> |

dev/tools/gen_defaults/lib/time_picker_template.dart

@@ -132,7 +132,7 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
 
   @override
   Color get dialBackgroundColor {
-    return ${componentColor(dialComponent)}.withOpacity(_colors.brightness == Brightness.dark ? 0.12 : 0.08);
+    return ${componentColor(dialComponent)};
   }
 
   @override

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

@@ -3434,7 +3434,7 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
 
   @override
   Color get dialBackgroundColor {
-    return _colors.surfaceVariant.withOpacity(_colors.brightness == Brightness.dark ? 0.12 : 0.08);
+    return _colors.surfaceVariant;
   }
 
   @override

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

@@ -136,8 +136,14 @@ class TimePickerThemeData with Diagnosticable {
   /// The background color of the time picker dial when the entry mode is
   /// [TimePickerEntryMode.dial] or [TimePickerEntryMode.dialOnly].
   ///
-  /// If this is null, the time picker defaults to the overall theme's
-  /// [ColorScheme.primary].
+  /// If this is null and [ThemeData.useMaterial3] is true, the time picker
+  /// dial background color defaults [ColorScheme.surfaceVariant] color.
+  ///
+  /// If this is null and [ThemeData.useMaterial3] is false, the time picker
+  /// dial background color defaults to [ColorScheme.onSurface] color with
+  /// an opacity of 0.08 when the overall theme's brightness is [Brightness.light]
+  /// and [ColorScheme.onSurface] color with an opacity of 0.12 when the overall
+  /// theme's brightness is [Brightness.dark].
   final Color? dialBackgroundColor;
 
   /// The color of the time picker dial's hand when the entry mode is

packages/flutter/test/material/time_picker_test.dart

@@ -12,6 +12,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart';
 
+import '../rendering/mock_canvas.dart';
 import '../widgets/semantics_tester.dart';
 import 'feedback_tester.dart';
 
@@ -225,6 +226,70 @@ void main() {
     expect(selectedLabels.map<bool>((dynamic tp) => tp.inner as bool), inner0To23);
   });
 
+  testWidgets('Material3 - Dial background uses correct default color', (WidgetTester tester) async {
+    ThemeData theme = ThemeData(useMaterial3: true);
+    Widget buildTimePicker(ThemeData themeData) {
+      return MaterialApp(
+        theme: themeData,
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                return ElevatedButton(
+                  child: const Text('X'),
+                  onPressed: () {
+                    showTimePicker(
+                      context: context,
+                      initialTime: const TimeOfDay(hour: 7, minute: 0),
+                    );
+                  },
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildTimePicker(theme));
+
+    // Open the time picker dialog.
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+
+    // Test default dial background color.
+    RenderBox dial = tester.firstRenderObject<RenderBox>(find.byType(CustomPaint));
+    expect(
+      dial,
+      paints
+        ..circle(color: theme.colorScheme.surfaceVariant) // Dial background color.
+        ..circle(color: Color(theme.colorScheme.primary.value)), // Dial hand color.
+    );
+
+    await tester.tap(find.text(okString)); // dismiss the dialog
+    await tester.pumpAndSettle();
+
+    // Test dial background color when theme color scheme is changed.
+    theme = theme.copyWith(
+      colorScheme: theme.colorScheme.copyWith(
+        surfaceVariant: const Color(0xffff0000),
+      ),
+    );
+    await tester.pumpWidget(buildTimePicker(theme));
+
+    // Open the time picker dialog.
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+
+    dial = tester.firstRenderObject<RenderBox>(find.byType(CustomPaint));
+    expect(
+      dial,
+      paints
+        ..circle(color: const Color(0xffff0000)) // Dial background color.
+        ..circle(color: Color(theme.colorScheme.primary.value)), // Dial hand color.
+    );
+  });
+
   for (final MaterialType materialType in MaterialType.values) {
     group('Dial (${materialType.name})', () {
       testWidgets('tap-select an hour', (WidgetTester tester) async {

packages/flutter/test/material/time_picker_theme_test.dart

@@ -242,7 +242,7 @@ void main() {
     expect(
       dial,
       paints
-        ..circle(color: defaultTheme.colorScheme.surfaceVariant.withOpacity(0.08)) // Dial background color.
+        ..circle(color: defaultTheme.colorScheme.surfaceVariant) // Dial background color.
         ..circle(color: Color(defaultTheme.colorScheme.primary.value)), // Dial hand color.
     );