Search code examples
flutterdartlocalizationdatetimepickertimepicker

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

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:

enter image description here

2. When App language changed to Spanish:

enter image description here

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

  • 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.