M3 TimePicker input mode has incorrect spacing and mode icon position is bit off

#91605
#101480

In the PM/AM time selection example, you can see that the two dots that are between the hour and minute selections are not centered, or the time entry fields are not stretched properly in width.

flutter doctor -v

[✓] Flutter (Channel master, 3.9.0-1.0.pre.121, on Microsoft Windows [Version 10.0.22621.1344], locale ru-UA)
    • Flutter version 3.9.0-1.0.pre.121 on channel master at C:\Flutter-SDK\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ccfa0bd5a8 (2 days ago), 2023-03-09 08:24:17 -0500
    • Engine revision a82207cee3
    • Dart version 3.0.0 (build 3.0.0-312.0.dev)
    • DevTools version 2.22.2

[✓] Windows Version (Installed version of Windows is version 10 or higher)

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\yablo\AppData\Local\Android\sdk
    • Platform android-TiramisuPrivacySandbox, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.5)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.4.33403.182
    • Windows 10 SDK version 10.0.22000.0

[✓] Android Studio (version 2022.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 11.0.15+0-b2043.56-9505619)

[✓] IntelliJ IDEA Community Edition (version 2022.3)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.2.1
    • Flutter plugin version 72.0.4
    • Dart plugin version 223.8617.8

[✓] VS Code (version 1.76.1)
    • VS Code at C:\Users\yablo\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.60.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22621.1344]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 110.0.5481.180
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 110.0.1587.69

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

• No issues found!

@MaxYablochkin

Thanks for filing the issue, @MaxYablochkin
I can see this issue on the latest master channel when using M3.

There is also another issue with Dial picker mode as well. On this mode, the Time selector separator (colon symbol) doesn't seem to be in the middle.

M3 specs: https://m3.material.io/components/time-pickers/specs

Text input mode	Dial picker mode

Sample code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: Scaffold(
        body: const Center(
          child: Text('Hello world'),
        ),
        floatingActionButton: Builder(
          builder: (context) {
            return FloatingActionButton(
              child: const Icon(Icons.add),
              onPressed: () async {
                await showTimePicker(
                  initialTime: TimeOfDay.now(),
                  context: context,
                );
              },
            );
          }
        ),
      ),
    );
  }
}

flutter doctor -v (master)

[!] Flutter (Channel master, 3.9.0-1.0.pre.164, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.9.0-1.0.pre.164 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 9ba0d08ebc (19 hours ago), 2023-03-12 00:16:19 -0500
    • Engine revision 57f7120ef9
    • Dart version 3.0.0 (build 3.0.0-322.0.dev)
    • DevTools version 2.22.2
    • 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 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.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 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.1)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 110.0.5481.177

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

! Doctor found issues in 2 categories.

This was introduced in #116396

Looks like there are several spacing issues and mode icon position is also not right.

Update

This seems to be reproducing in 12-hour format.

Update 2

On Oneplus 8, TimePicker becomes scrollable due to this issue.

telegram-cloud-document-5-6089272497599941450.mp4

@HansMuller

cc: @HansMuller

@gspencergoog

cc: @gspencergoog

This is due to this width condition in _minDialogSize

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

Lines 2326 to 2345 in d8a7211

    
             case TimePickerEntryMode.input: 
        
             case TimePickerEntryMode.inputOnly: 
        
               final MaterialLocalizations localizations = MaterialLocalizations.of(context); 
        
               final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context)); 
        
               final double timePickerWidth; 
        
               switch(timeOfDayFormat) { 
        
                 case TimeOfDayFormat.HH_colon_mm: 
        
                 case TimeOfDayFormat.HH_dot_mm: 
        
                 case TimeOfDayFormat.frenchCanadian: 
        
                 case TimeOfDayFormat.H_colon_mm: 
        
                   final _TimePickerDefaults defaultTheme = useMaterial3 ? _TimePickerDefaultsM3(context) : _TimePickerDefaultsM2(context); 
        
                   timePickerWidth = _kTimePickerMinInputSize.width - defaultTheme.dayPeriodPortraitSize.width - 12; 
        
                   break; 
        
                 case TimeOfDayFormat.a_space_h_colon_mm: 
        
                 case TimeOfDayFormat.h_colon_mm_space_a: 
        
                   timePickerWidth = _kTimePickerMinInputSize.width; 
        
                   break; 
        
               } 
        
               return Size(timePickerWidth, _kTimePickerMinInputSize.height); 
        
           }

When using timePickerWidth = _kTimePickerInputSize.width - defaultTheme.dayPeriodPortraitSize.width - 12; for 12-hour and 24-hour in _minDialogSize, Issue is fixed.

But I'm not sure why this condition was added as it doesn't fail tests in time_picker_test.dart.

Hmm. I thought I had fixed that, but I guess not.

There is a condition for that because the am/pm entry mode is wider than the 24-hour mode to accommodate the day period (am/pm) selector.

However, if you use the same calculation for both, the colon is centered in am/pm mode, but that is because the dialog has shrunk past the point where it needs to be to remove all the extra spacing. Some fonts will be too constrained by that, and will wrap the numbers in the entry field.

This is closer to the spec, I think, and should remove the extra padding near the colon:

        switch(timeOfDayFormat) {
          case TimeOfDayFormat.HH_colon_mm:
          case TimeOfDayFormat.HH_dot_mm:
          case TimeOfDayFormat.frenchCanadian:
          case TimeOfDayFormat.H_colon_mm:
            final _TimePickerDefaults defaultTheme = useMaterial3 ? _TimePickerDefaultsM3(context) : _TimePickerDefaultsM2(context);
            timePickerWidth = _kTimePickerInputSize.width - defaultTheme.dayPeriodPortraitSize.width - 12;
            break;
          case TimeOfDayFormat.a_space_h_colon_mm:
          case TimeOfDayFormat.h_colon_mm_space_a:
            timePickerWidth = _kTimePickerInputSize.width - (useMaterial3 ? 32 : 0);
            break;
        }

Really, I think _kTimePickerInputSize should be a Material token, but there isn't one for that.

@gspencergoog

@gspencergoog
Do you mind if I try this and add regression tests so this can be caught if modified.

@TahaTesser

@TahaTesser No, not at all! That would be great.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

M3 `TimePicker` input mode has incorrect spacing and mode icon position is bit off #122471

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	case TimePickerEntryMode.input:
	case TimePickerEntryMode.inputOnly:
	final MaterialLocalizations localizations = MaterialLocalizations.of(context);
	final TimeOfDayFormat timeOfDayFormat = localizations.timeOfDayFormat(alwaysUse24HourFormat: MediaQuery.alwaysUse24HourFormatOf(context));
	final double timePickerWidth;
	switch(timeOfDayFormat) {
	case TimeOfDayFormat.HH_colon_mm:
	case TimeOfDayFormat.HH_dot_mm:
	case TimeOfDayFormat.frenchCanadian:
	case TimeOfDayFormat.H_colon_mm:
	final _TimePickerDefaults defaultTheme = useMaterial3 ? _TimePickerDefaultsM3(context) : _TimePickerDefaultsM2(context);
	timePickerWidth = _kTimePickerMinInputSize.width - defaultTheme.dayPeriodPortraitSize.width - 12;
	break;
	case TimeOfDayFormat.a_space_h_colon_mm:
	case TimeOfDayFormat.h_colon_mm_space_a:
	timePickerWidth = _kTimePickerMinInputSize.width;
	break;
	}
	return Size(timePickerWidth, _kTimePickerMinInputSize.height);
	}

M3 TimePicker input mode has incorrect spacing and mode icon position is bit off #122471

Description

Activity

huycozy commented on Mar 13, 2023

TahaTesser commented on Mar 14, 2023

TahaTesser commented on Mar 14, 2023

TahaTesser commented on Mar 14, 2023

gspencergoog commented on Mar 14, 2023

TahaTesser commented on Mar 14, 2023

gspencergoog commented on Mar 14, 2023

github-actions commented on Apr 5, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

M3 `TimePicker` input mode has incorrect spacing and mode icon position is bit off #122471