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

Question

I am using showTimePicker in my application. Also, I am using Internationalizing for my flutter app with two languages(English 'en' & Spanish 'es').

• Code for present 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),
                ),
              ),
            ),

Issue what I am facing is Initially when I run my App with the English language it's working fine and showing timePicker with 12 hours formate. But when I am changing App language to Spanish from the App then it will start showing timePicker with 24 hours formate. Please find the below screenshots for the same.

1. When App language is English:

2. When App language changed to Spanish:

I am facing this issue while I change supportedLocales value to Locale('es', '') from Locale('en', ''). But I have no idea how I can fix this.

Solution 1

For the above issues as I found one library(flutter_rounded_date_picker) and using it, I am able to fix my problem. It is not a solution but we can use it as a workaround.

Code for ShowTimer:

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

As shown in the above code using flutter_rounded_date_picker we can pass the locale and I am passing Locale("en", "") for Spanish and English. So It is showing 12 hours timePicker for any locale.

• For more information, you can refer GitHub issue[54839] raised by me

Solution 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,
              );
            }
      },
    );

Comments

[Talked]

Hi! I have the same problem, have you found a solution in all that time?

[Dhaval Kansara]

@Talked Yes, I fixed these issues using the flutter_rounded_date_picker library. Also added the answer below.

[Talked]

wow thanks man I'll try! I have days with this problem

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.