Skip to content

Commit

Permalink
Fix wide DatePicker input mode button padding for Material 3 (#147236)
Browse files Browse the repository at this point in the history
fixes [Wide `DatePickerDialog` "Switch to input" button has no margin from dialog side](#141338)

### Description
Currently, there is no material design token for the input mode button padding. This PR fixes the padding by taking date picker side padding values into account.

![specs](https://github.com/flutter/flutter/assets/48603081/4d946d57-1e00-4b11-b414-0788a20fe0cb)

### 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) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Builder(builder: (BuildContext context) {
            return ElevatedButton(
              onPressed: () {
                showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime.utc(2010),
                  lastDate: DateTime.utc(2030),
                );
              },
              child: const Text('Show Date Picker'),
            );
          }),
        ),
      ),
    );
  }
}

```

</details>

### Before
![before](https://github.com/flutter/flutter/assets/48603081/e3a70179-540f-4307-b996-7cf35d28adbc)

### After
![after](https://github.com/flutter/flutter/assets/48603081/c65a2d1d-b0ae-4969-868e-e64f5c845fcb)
  • Loading branch information
TahaTesser committed Apr 29, 2024
1 parent d5baa33 commit 7ff31a4
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 6 deletions.
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

0 comments on commit 7ff31a4

Please sign in to comment.