Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix wide DatePicker input mode button padding for Material 3 #147236

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 15 additions & 5 deletions packages/flutter/lib/src/material/date_picker.dart
Expand Up @@ -837,11 +837,12 @@ class _DatePickerHeader extends StatelessWidget {

@override
Widget build(BuildContext context) {
final DatePickerThemeData themeData = DatePickerTheme.of(context);
final ThemeData theme = Theme.of(context);
final DatePickerThemeData datePickerTheme = DatePickerTheme.of(context);
final DatePickerThemeData defaults = DatePickerTheme.defaults(context);
final Color? backgroundColor = themeData.headerBackgroundColor ?? defaults.headerBackgroundColor;
final Color? foregroundColor = themeData.headerForegroundColor ?? defaults.headerForegroundColor;
final TextStyle? helpStyle = (themeData.headerHelpStyle ?? defaults.headerHelpStyle)?.copyWith(
final Color? backgroundColor = datePickerTheme.headerBackgroundColor ?? defaults.headerBackgroundColor;
final Color? foregroundColor = datePickerTheme.headerForegroundColor ?? defaults.headerForegroundColor;
final TextStyle? helpStyle = (datePickerTheme.headerHelpStyle ?? defaults.headerHelpStyle)?.copyWith(
color: foregroundColor,
);

Expand Down Expand Up @@ -923,7 +924,16 @@ class _DatePickerHeader extends StatelessWidget {
),
if (entryModeButton != null)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
padding: theme.useMaterial3
// TODO(TahaTesser): This is an eye-balled M3 entry mode button padding
// from https://m3.material.io/components/date-pickers/specs#c16c142b-4706-47f3-9400-3cde654b9aa8.
// Update this value to use tokens when available.
? const EdgeInsetsDirectional.only(
start: 8.0,
end: 4.0,
bottom: 6.0,
)
: const EdgeInsets.symmetric(horizontal: 4),
child: Semantics(
container: true,
child: entryModeButton,
Expand Down
6 changes: 5 additions & 1 deletion packages/flutter/test/material/date_picker_test.dart
Expand Up @@ -871,9 +871,13 @@ void main() {
// Test switch button position.
final Finder switchButtonM3 = find.widgetWithIcon(IconButton, Icons.edit_outlined);
final Offset switchButtonTopLeft = tester.getTopLeft(switchButtonM3);
final Offset switchButtonBottomLeft = tester.getBottomLeft(switchButtonM3);
final Offset headerTextBottomLeft = tester.getBottomLeft(headerText);
expect(switchButtonTopLeft.dx, dialogTopLeft.dx + 4.0);
final Offset dialogBottomLeft = tester.getBottomLeft(find.byType(AnimatedContainer));
expect(switchButtonTopLeft.dx, dialogTopLeft.dx + 8.0);
expect(switchButtonTopLeft.dy, headerTextBottomLeft.dy);
expect(switchButtonBottomLeft.dx, dialogTopLeft.dx + 8.0);
expect(switchButtonBottomLeft.dy, dialogBottomLeft.dy - 6.0);

// Test vertical divider position.
final Finder divider = find.byType(VerticalDivider);
Expand Down