flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
165.62k stars 27.34k forks source link

Wrong digits format shows in timepicker widget #132032

Closed m8811163008 closed 1 year ago

m8811163008 commented 1 year ago

Is there an existing issue for this?

Steps to reproduce

Add supported locate to fa in MaterialApp widget

...
              localizationsDelegates: const [
                GlobalCupertinoLocalizations.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                ComponentLibraryLocalizations.delegate,
              ],
              supportedLocales: const [
                Locale("fa", "IR"),
              ],
              locale: const Locale("fa", "IR"),
...

then call the show showTimePicker. It show the English number in TimePickerEntryMode.dial mode:

flutter_01 This screen shot shows the widget shows 0 with farsi font and other numbers with English fonts.

Another problem is related with TimePickerEntryMode.input mode: It shows error message with correct digits in supported language and to confirm the dialog we should type English digits. flutter_02 .This screen shot shows widget when you enter input mode.

When you confirm the time it shows wrong textfield error. flutter_03 This screen shot shows widget with wrong error despite the input is correct.

Expected results

  1. Expect to show the correct digits in fa but here the digits are in English format
  2. Expect to confirm the selected time but shows the error message in input mode

Actual results

  1. Shows the wrong number format when selecting hour in dialog mode
  2. Show the error message when the digits are in fa when time picker is in input mode

Code sample

Code sample ```dart ... localizationsDelegates: const [ GlobalCupertinoLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ComponentLibraryLocalizations.delegate, ], supportedLocales: const [ Locale("fa", "IR"), ], locale: const Locale("fa", "IR"), ... ```

Screenshots or Video

Screenshots / Video demonstration [Upload media here] ![flutter_01](https://github.com/flutter/flutter/assets/20933055/8236277e-f4ee-4a45-b92d-c5a520eb3c3b) ![flutter_02](https://github.com/flu ![flutter_03](https://github.com/flutter/flutter/assets/20933055/640b073d-3adc-47d5-8a55-db914c54df76) tter/flutter/assets/20933055/d99973ab-ca3f-41c7-ba57-f3ad1fc1e6e0)

Logs

Logs ```console [Paste your logs here] ```

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.10.5, on macOS 13.0 22A380 darwin-x64, locale en-US) • Flutter version 3.10.5 on channel stable at /Library/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 796c8ef792 (8 weeks ago), 2023-06-13 15:51:02 -0700 • Engine revision 45f6e00911 • Dart version 3.0.5 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/viraminer/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • 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 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] 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 • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.79.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.70.0 [✓] VS Code (version 1.79.2) • VS Code at /Users/viraminer/Downloads/Visual Studio Code.app/Contents • Flutter extension version 3.70.0 [✓] Connected device (3 available) • ViraMiner’s iPhone (mobile) • 00008030-0018391622FA802E • ios • iOS 16.5.1 20F75 • macOS (desktop) • macos • darwin-x64 • macOS 13.0 22A380 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 114.0.5735.198 [✓] Network resources • All expected network resources are available. • No issues found! ```
dam-ease commented 1 year ago

Hi @m8811163008. Thanks for filing this issue. I can see the issue with the clock numbers being shown in English and can also produce the error when confirming the time on the latest master and stable channels.

https://github.com/flutter/flutter/assets/53122008/fdaa9664-fbba-460c-bda1-b5c1f33d76a2

Code Sample Used

``` import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; /// Flutter code sample for [showTimePicker]. void main() { runApp(const ShowTimePickerApp()); } class ShowTimePickerApp extends StatefulWidget { const ShowTimePickerApp({super.key}); @override State createState() => _ShowTimePickerAppState(); } class _ShowTimePickerAppState extends State { ThemeMode themeMode = ThemeMode.dark; bool useMaterial3 = true; void setThemeMode(ThemeMode mode) { setState(() { themeMode = mode; }); } void setUseMaterial3(bool? value) { setState(() { useMaterial3 = value!; }); } @override Widget build(BuildContext context) { return MaterialApp( localizationsDelegates: const [ GlobalCupertinoLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: const [ Locale("fa", "IR"), ], locale: const Locale("fa", "IR"), theme: ThemeData.light(useMaterial3: useMaterial3), darkTheme: ThemeData.dark(useMaterial3: useMaterial3), themeMode: themeMode, home: TimePickerOptions( themeMode: themeMode, useMaterial3: useMaterial3, setThemeMode: setThemeMode, setUseMaterial3: setUseMaterial3, ), ); } } class TimePickerOptions extends StatefulWidget { const TimePickerOptions({ super.key, required this.themeMode, required this.useMaterial3, required this.setThemeMode, required this.setUseMaterial3, }); final ThemeMode themeMode; final bool useMaterial3; final ValueChanged setThemeMode; final ValueChanged setUseMaterial3; @override State createState() => _TimePickerOptionsState(); } class _TimePickerOptionsState extends State { TimeOfDay? selectedTime; TimePickerEntryMode entryMode = TimePickerEntryMode.dial; Orientation? orientation; TextDirection textDirection = TextDirection.ltr; MaterialTapTargetSize tapTargetSize = MaterialTapTargetSize.padded; bool use24HourTime = false; void _entryModeChanged(TimePickerEntryMode? value) { if (value != entryMode) { setState(() { entryMode = value!; }); } } void _orientationChanged(Orientation? value) { if (value != orientation) { setState(() { orientation = value; }); } } void _textDirectionChanged(TextDirection? value) { if (value != textDirection) { setState(() { textDirection = value!; }); } } void _tapTargetSizeChanged(MaterialTapTargetSize? value) { if (value != tapTargetSize) { setState(() { tapTargetSize = value!; }); } } void _use24HourTimeChanged(bool? value) { if (value != use24HourTime) { setState(() { use24HourTime = value!; }); } } void _themeModeChanged(ThemeMode? value) { widget.setThemeMode(value!); } @override Widget build(BuildContext context) { return Material( child: Column( children: [ Expanded( child: GridView( gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 350, mainAxisSpacing: 4, mainAxisExtent: 200 * MediaQuery.textScaleFactorOf(context), crossAxisSpacing: 4, ), children: [ EnumCard( choices: TimePickerEntryMode.values, value: entryMode, onChanged: _entryModeChanged, ), EnumCard( choices: ThemeMode.values, value: widget.themeMode, onChanged: _themeModeChanged, ), EnumCard( choices: TextDirection.values, value: textDirection, onChanged: _textDirectionChanged, ), EnumCard( choices: MaterialTapTargetSize.values, value: tapTargetSize, onChanged: _tapTargetSizeChanged, ), ChoiceCard( choices: const [...Orientation.values, null], value: orientation, title: '$Orientation', choiceLabels: { for (final Orientation choice in Orientation.values) choice: choice.name, null: 'from MediaQuery', }, onChanged: _orientationChanged, ), ChoiceCard( choices: const [false, true], value: use24HourTime, onChanged: _use24HourTimeChanged, title: 'Time Mode', choiceLabels: const { false: '12-hour am/pm time', true: '24-hour time', }, ), ChoiceCard( choices: const [false, true], value: widget.useMaterial3, onChanged: widget.setUseMaterial3, title: 'Material Version', choiceLabels: const { false: 'Material 2', true: 'Material 3', }, ), ], ), ), SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.all(12.0), child: ElevatedButton( child: const Text('Open time picker'), onPressed: () async { final TimeOfDay? time = await showTimePicker( context: context, initialTime: selectedTime ?? TimeOfDay.now(), initialEntryMode: entryMode, orientation: orientation, builder: (BuildContext context, Widget? child) { // We just wrap these environmental changes around the // child in this builder so that we can apply the // options selected above. In regular usage, this is // rarely necessary, because the default values are // usually used as-is. return Theme( data: Theme.of(context).copyWith( materialTapTargetSize: tapTargetSize, ), child: Directionality( textDirection: textDirection, child: MediaQuery( data: MediaQuery.of(context).copyWith( alwaysUse24HourFormat: use24HourTime, ), child: child!, ), ), ); }, ); setState(() { selectedTime = time; }); }, ), ), if (selectedTime != null) Text('Selected time: ${selectedTime!.format(context)}'), ], ), ), ], ), ); } } // This is a simple card that presents a set of radio buttons (inside of a // RadioSelection, defined below) for the user to select from. class ChoiceCard extends StatelessWidget { const ChoiceCard({ super.key, required this.value, required this.choices, required this.onChanged, required this.choiceLabels, required this.title, }); final T value; final Iterable choices; final Map choiceLabels; final String title; final ValueChanged onChanged; @override Widget build(BuildContext context) { return Card( // If the card gets too small, let it scroll both directions. child: SingleChildScrollView( child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Text(title), ), for (final T choice in choices) RadioSelection( value: choice, groupValue: value, onChanged: onChanged, child: Text(choiceLabels[choice]!), ), ], ), ), ), ), ); } } // This aggregates a ChoiceCard so that it presents a set of radio buttons for // the allowed enum values for the user to select from. class EnumCard extends StatelessWidget { const EnumCard({ super.key, required this.value, required this.choices, required this.onChanged, }); final T value; final Iterable choices; final ValueChanged onChanged; @override Widget build(BuildContext context) { return ChoiceCard( value: value, choices: choices, onChanged: onChanged, choiceLabels: { for (final T choice in choices) choice: choice.name, }, title: value.runtimeType.toString()); } } // A button that has a radio button on one side and a label child. Tapping on // the label or the radio button selects the item. class RadioSelection extends StatefulWidget { const RadioSelection({ super.key, required this.value, required this.groupValue, required this.onChanged, required this.child, }); final T value; final T? groupValue; final ValueChanged onChanged; final Widget child; @override State> createState() => _RadioSelectionState(); } class _RadioSelectionState extends State> { @override Widget build(BuildContext context) { return Row( mainAxisSize: MainAxisSize.min, children: [ Padding( padding: const EdgeInsetsDirectional.only(end: 8), child: Radio( groupValue: widget.groupValue, value: widget.value, onChanged: widget.onChanged, ), ), GestureDetector( onTap: () => widget.onChanged(widget.value), child: widget.child), ], ); } } ```

flutter doctor -v

``` [✓] Flutter (Channel stable, 3.10.6, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.10.6 on channel stable at /Users/damilolaalimi/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f468f3366c (4 weeks ago), 2023-07-12 15:19:05 -0700 • Engine revision cdbeda788a • Dart version 3.0.6 • DevTools version 2.23.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • 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 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] 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 • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.80.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.170 [✓] Network resources • All expected network resources are available. • No issues found! ``` ``` [✓] Flutter (Channel master, 3.13.0-17.0.pre.76, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.13.0-17.0.pre.76 on channel master at /Users/damilolaalimi/fvm/versions/master • Upstream repository https://github.com/flutter/flutter.git • Framework revision bfbe79feb2 (12 hours ago), 2023-08-06 21:47:34 -0400 • Engine revision 15b5707af4 • Dart version 3.2.0 (build 3.2.0-41.0.dev) • DevTools version 2.26.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • 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 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] 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 • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.80.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • iPhone 14 (mobile) • 1A122DE2-0CAB-4C3E-A395-691BF27D626F • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 115.0.5790.170 [✓] Network resources • All expected network resources are available. • No issues found! ```

Also, this issue might be similar to an already open issue describing this case, can you confirm it is similar to https://github.com/flutter/flutter/issues/85527

m8811163008 commented 1 year ago

Hi @dam-ease , I can confirm the issue is similar to #85527 and it is still shows English digits at TimePickerEntryMode.dial mode

m8811163008 commented 1 year ago

I had the same issue with you sample code on my iOS device, here is the screen shots but with Material2 the digits issue which was showing the English number has resolved but still show the error message in input mode.

screen shots of Material3 ![flutter_01](https://github.com/flutter/flutter/assets/20933055/40a7064b-1eec-4339-baf9-b4d372243fb9) ![flutter_02](https://github.com/flutter/flutter/assets/20933055/a5d786b8-fde4-47bf-a3d1-ab838f56340b)
screen shots of Material2 ![flutter_03](https://github.com/flutter/flutter/assets/20933055/3731e02c-f03d-4504-8a61-1f211ae52769) ![flutter_04](https://github.com/flutter/flutter/assets/20933055/43ce71f9-1719-4429-b925-1df811f52aee)
dam-ease commented 1 year ago

Hi @m8811163008. Thanks for these. Please can you file a separate issue for that of the regression as described here https://github.com/flutter/flutter/issues/132032#issuecomment-1669063690 so it's easier to track? For the issue with error being thrown when inputting correct time which is similar to an already open issue https://github.com/flutter/flutter/issues/85527, I'd be closing this in favour of the already open one, kindly comment on the issue, upvote for attention and follow up on it for updates. If you disagree with these, kindly comment and I'd reopen this

github-actions[bot] commented 1 year ago

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.