ShowTimePicker: Hours and minutes separator is not aligned correctly in non-English language. #173621
Description
Steps to reproduce
- Run the sample.
- Click the button.
- Observe the white space between the hours and the separator.
Expected results
This is the english version of the time picker with alwaysUse24HoursFormat: true:
Actual results
| Screenshot | Screenshot with annotation |
|---|---|
 |
 |
The rendering is also not good when you use a different text size.
The overall experience of theming the time picker is improvable.
Code sample
Code sample
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(final BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [Locale('en'), Locale('es')],
locale: const Locale('es'),
home: Scaffold(
body: Center(
child: Builder(
builder: (final context) => ElevatedButton(
onPressed: () => showTimePicker(
context: context,
initialTime: const TimeOfDay(hour: 12, minute: 0),
initialEntryMode: TimePickerEntryMode.input,
),
child: const Text('Hello, World!'),
),
),
),
),
);
}Screenshots or Video
No response
Logs
No response
Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.32.4, on macOS 15.6 24G84 darwin-arm64, locale en-GB) [335ms]
• Flutter version 3.32.4 on channel stable at /Users/manuelrauber/fvm/versions/3.32.4
• Upstream repository ssh://[email protected]/flutter/flutter.git
• Framework revision 6fba2447e9 (9 weeks ago), 2025-06-12 19:03:56 -0700
• Engine revision 8cd19e509d
• Dart version 3.8.1
• DevTools version 2.45.1
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [1,188ms]
• Android SDK at /Users/manuelrauber/Library/Android/sdk
• Platform android-36, build-tools 34.0.0
• Java binary at: /Users/manuelrauber/.jenv/versions/17/bin/java
This JDK is specified in your Flutter configuration.
To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment Homebrew (build 17.0.15+0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 16.4) [647ms]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16F6
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web [9ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2025.1) [9ms]
• Android Studio at /Users/manuelrauber/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 21.0.6+-13391695-b895.109)
[✓] VS Code (version 1.92.2) [8ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.116.0
[✓] Network resources [238ms]
• All expected network resources are available.
! Doctor found issues in 1 category.