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.

Sign up for GitHub

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

Jump to bottom

Wide DatePickerDialog "Switch to input" button has no margin from dialog side #141338

Closed
parlough opened this issue Jan 11, 2024 · 1 comment · Fixed by #147236
Closed

Wide DatePickerDialog "Switch to input" button has no margin from dialog side #141338

parlough opened this issue Jan 11, 2024 · 1 comment · Fixed by #147236
Assignees
@TahaTesser
Labels
f: date/time picker Date or time picker widgets f: material design flutter/packages/flutter/material repository. found in release: 3.16 Found to occur in 3.16 found in release: 3.19 Found to occur in 3.19 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@parlough
Copy link
Member

parlough commented Jan 11, 2024 •
edited

Steps to reproduce

  1. Have a DatePickerDialog in your app that can reach its widest form, and have M3 enabled
  2. Run the app. (I tried macos, CanvasKit, and skwasm)
  3. Open the date picker if necessary
  4. Adjust screen so DatePicker can be in its widest mode
  5. Find the "Switch to input" button in the lower left corner

Expected results

The "Switch to input" button in the lower left corner should have some margin from the side of the dialog, similar to the narrower view.

Actual results

The "Switch to input" button is directly against the side of the dialog.

Code sample

Code sample 
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: DatePickerDialog(
            firstDate: DateTime.utc(2010),
            lastDate: DateTime.utc(2030),
          ),
        ),
      ),
    );
  }
}

Screenshots

Screenshots

Wide date picker (with issue):

Wide date picker with Switch to input button too close to side

Narrow date picker (better):

Narrow date picker with Switch to input button with better marging

Flutter version

Version info 
Flutter 3.19.0-3.0.pre.43 • channel main • https://github.com/flutter/flutter
Framework • revision f961fdf2ba (4 hours ago) • 2024-01-10 17:37:07 -0500
Engine • revision a045134c91
Tools • Dart 3.4.0 (build 3.4.0-14.0.dev) • DevTools 2.31.0
@parlough parlough mentioned this issue Jan 11, 2024
Open
25 tasks
@huycozy huycozy added the in triage Presently being triaged by the triage team label Jan 11, 2024
@huycozy
Copy link
Member

huycozy commented Jan 11, 2024

Thanks for the report!

flutter doctor -v (stable and master) 
[✓] Flutter (Channel stable, 3.16.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.16.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 46787ee49c (28 hours ago), 2024-01-09 14:36:07 -0800
    • Engine revision 3f3e560236
    • Dart version 3.2.3
    • DevTools version 2.28.4

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.85.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.80.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 120.0.6099.216

[✓] Network resources
    • All expected network resources are available.

• No issues found!
[!] Flutter (Channel master, 3.19.0-3.0.pre.49, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.0-3.0.pre.49 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 085aaa5d63 (55 minutes ago), 2024-01-10 21:13:27 -0500
    • Engine revision 42e3e02361
    • Dart version 3.4.0 (build 3.4.0-15.0.dev)
    • DevTools version 2.31.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.85.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.80.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 120.0.6099.216

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

@huycozy huycozy added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team found in release: 3.16 Found to occur in 3.16 found in release: 3.19 Found to occur in 3.19 f: date/time picker Date or time picker widgets and removed in triage Presently being triaged by the triage team labels Jan 11, 2024
@HansMuller HansMuller added triaged-design Triaged by Design Languages team P2 Important issues not at the top of the work list labels Jan 17, 2024
@TahaTesser TahaTesser self-assigned this Apr 23, 2024
@TahaTesser TahaTesser mentioned this issue Apr 23, 2024
Merged
9 tasks
auto-submit bot pushed a commit that referenced this issue Apr 29, 2024
@TahaTesser
Fix wide DatePicker input mode button padding for Material 3 (#147236)
7ff31a4 
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)
@huycozy huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@TahaTesser TahaTesser

Labels
f: date/time picker Date or time picker widgets f: material design flutter/packages/flutter/material repository. found in release: 3.16 Found to occur in 3.16 found in release: 3.19 Found to occur in 3.19 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on P2 Important issues not at the top of the work list r: fixed Issue is closed as already fixed in a newer version team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
Nevercode
Status: Done (PR merged)
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix wide DatePicker input mode button padding for Material 3 TahaTesser/flutter
4 participants
@HansMuller @parlough @TahaTesser @huycozy