更改应用程序语言后，showTimePicker 对话框会出现 24 小时抖动

Question

我在我的应用程序中使用 showTimePicker。另外，我在我的 flutter 应用程序中使用 Internationalizing 两种语言（英语 'en' 和西班牙语 'es'）。

当前showTimePicker代码：

Padding(
              padding: EdgeInsets.all(2),
              child: MaterialButton(
                minWidth: double.infinity,
                onPressed: () async {
                  TimeOfDay picked = await showTimePicker(
                    context: context,
                    initialTime: TimeOfDay.now(),
                    builder: (BuildContext context, Widget child) {
                      return MediaQuery(
                        data: MediaQuery.of(context)
                            .copyWith(alwaysUse24HourFormat: false),
                        child: child,
                      );
                    },
                  );
                },
                child: Text(
                  S.of(context).set_time,
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Theme.of(context).primaryColor, fontSize: 14),
                ),
              ),
            ),

我面临的问题最初是当我运行我的应用程序使用英语时它工作正常并显示 timePicker 12 小时 formate。但是，当我将 App 语言从 App 更改为西班牙语时，它将开始显示 timePicker 和 24 小时格式。请在下面找到相同的屏幕截图。

1. App语言为英文时：

2。当应用程序语言更改为西班牙语时：

我在将 supportedLocales 值从 Locale('en', '') 更改为 Locale('es', '') 时遇到了这个问题。但我不知道如何解决这个问题。

Answer 1

对于上述问题，我找到了一个库（flutter_rounded_date_picker）并使用它，我能够解决我的问题。这不是解决方案，但我们可以将其用作解决方法。

ShowTimer 代码：

 TimeOfDay picked = await showRoundedTimePicker(
                        context: context,
                        theme: ThemeData(primaryColor:Theme.of(context).primaryColor),
                        initialTime: TimeOfDay.now(),
                        locale: Locale("en", "")
);

如上面的代码所示，使用 flutter_rounded_date_picker 我们可以传递语言环境，而我正在为西班牙语和英语传递 Locale("en", "")。所以它显示 12 小时 timePicker 对于任何语言环境。

更多信息可以参考GitHub issue[54839]我提出的

Answer 2

final dateTime = await showTimePicker(
          context: context,
          initialTime: TimeOfDay.now(),
          builder: (context, child) {
            if (MediaQuery.of(context).alwaysUse24HourFormat) {
              return child;
            } else {
              return Localizations.override(
                context: context,
                locale: Locale('en', 'US'),
                child: child,
              );
            }
      },
    );

Answer 3

有了flutter_form_builder包，我可以随意设置语言选择和时区。

在这里试试这个

  FormBuilderDateTimePicker(
        format: DateFormat("HH:mm", "tr"), //!24 saat
        controller: timeTextController,
        locale: const Locale('tr', 'TR'),
        enableInteractiveSelection: true,
        initialTime: selectedTime,
        //locale: const Locale.fromSubtags(languageCode: 'tr'),
        resetIcon: Icon(Icons.close),
        validators: [
          FormBuilderValidators.required(errorText: "Lütfen Saat seçiniz")
        ],
        attribute: "time",
        inputType: InputType.time,
        alwaysUse24HourFormat: true,
        timePickerInitialEntryMode: TimePickerEntryMode.dial,
        decoration:
            UIHelperDecoration.inputDecoration(null, null, null, null),
        builder: (BuildContext context, Widget child) {
          return Localizations.override(
            context: context,
            locale: Locale('tr', 'TR'),
            child: child,
          );
        },
      )

更改应用程序语言后，showTimePicker 对话框会出现 24 小时抖动

After changing Application language showTimePicker dialog comes with 24 hour in flutter

localization

datetimepicker

timepicker

dart

flutter