Unverified Commit 5554b0ee authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

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"  /> |
parent 97e0a058
...@@ -132,7 +132,7 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults { ...@@ -132,7 +132,7 @@ class _${blockName}DefaultsM3 extends _TimePickerDefaults {
@override @override
Color get dialBackgroundColor { Color get dialBackgroundColor {
return ${componentColor(dialComponent)}.withOpacity(_colors.brightness == Brightness.dark ? 0.12 : 0.08); return ${componentColor(dialComponent)};
} }
@override @override
......
...@@ -3434,7 +3434,7 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults { ...@@ -3434,7 +3434,7 @@ class _TimePickerDefaultsM3 extends _TimePickerDefaults {
@override @override
Color get dialBackgroundColor { Color get dialBackgroundColor {
return _colors.surfaceVariant.withOpacity(_colors.brightness == Brightness.dark ? 0.12 : 0.08); return _colors.surfaceVariant;
} }
@override @override
......
...@@ -136,8 +136,14 @@ class TimePickerThemeData with Diagnosticable { ...@@ -136,8 +136,14 @@ class TimePickerThemeData with Diagnosticable {
/// The background color of the time picker dial when the entry mode is /// The background color of the time picker dial when the entry mode is
/// [TimePickerEntryMode.dial] or [TimePickerEntryMode.dialOnly]. /// [TimePickerEntryMode.dial] or [TimePickerEntryMode.dialOnly].
/// ///
/// If this is null, the time picker defaults to the overall theme's /// If this is null and [ThemeData.useMaterial3] is true, the time picker
/// [ColorScheme.primary]. /// 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; final Color? dialBackgroundColor;
/// The color of the time picker dial's hand when the entry mode is /// The color of the time picker dial's hand when the entry mode is
......
...@@ -12,6 +12,7 @@ import 'package:flutter/material.dart'; ...@@ -12,6 +12,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import '../rendering/mock_canvas.dart';
import '../widgets/semantics_tester.dart'; import '../widgets/semantics_tester.dart';
import 'feedback_tester.dart'; import 'feedback_tester.dart';
...@@ -225,6 +226,70 @@ void main() { ...@@ -225,6 +226,70 @@ void main() {
expect(selectedLabels.map<bool>((dynamic tp) => tp.inner as bool), inner0To23); 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) { for (final MaterialType materialType in MaterialType.values) {
group('Dial (${materialType.name})', () { group('Dial (${materialType.name})', () {
testWidgets('tap-select an hour', (WidgetTester tester) async { testWidgets('tap-select an hour', (WidgetTester tester) async {
......
...@@ -242,7 +242,7 @@ void main() { ...@@ -242,7 +242,7 @@ void main() {
expect( expect(
dial, dial,
paints 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. ..circle(color: Color(defaultTheme.colorScheme.primary.value)), // Dial hand color.
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment