Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use showTimePicker as Widget in flutter?

I want the user to pick the date and time, for that there is date time picker dialogue.

But, is there a way that, I could show the date-time persistently on some flutter widget and use like any other widget?

Container(
   child: showTimePicker(
          context: context,
          initialTime: TimeOfDay.now(),
          builder: (BuildContext context, Widget child) {
            return Theme(
              data: ThemeData.dark(),
              child: child,
            );
          },
        );
}

but I cannot use showTimePicker as Widget.

How to use showTimePicker() as widget? so that other widgets can be built on top of it.

like image 315
rahul Kushwaha Avatar asked Mar 22 '20 12:03

rahul Kushwaha


People also ask

How do you show AM PM in time picker Flutter?

await showTimePicker( initialTime: TimeOfDay. now(), context: context, builder: (context, child) { final Widget mediaQueryWrapper = MediaQuery( data: MediaQuery. of(context). copyWith( alwaysUse24HourFormat: false, ), child: child, ); // A hack to use the es_US dateTimeFormat value.

How do I show DatePicker in Flutter?

DatePicker is a material widget in a flutter that lets the user select a date. Since there is no widget available for creating a date picker we will use showDatePicker() function. It will display a Material Design date picker in a dialog by calling flutter's inbuilt function.

How do I change the color of my TimePicker Flutter?

You can change the date picker color in Flutter, by adding the builder parameter and returning the new Theme widget. Inside the Theme widget, you can specify the new theme and provide the actual date picker widget inside the child property.


1 Answers

I ran into the problem just like you some time ago and I copied the source code and made my custom widget. Now, it can be used like any widget. If you want to adopt this, I want to mention a couple of things.

  1. I am not sure if this works well with localization, I did not test that.
  2. I am not sure if this works on other themes than the light theme, I only tested on the light theme.

You can find the code here. https://gist.github.com/mithunadhikari40/b55b9990ebc15d0d8bf70fd3f87709b0

Usage: Copy the code from the above link, create a dart file, paste the code and use it like this:

                     SizedBox(
                        child: TimePickerDialog(
                        initialTime: TimeOfDay.fromDateTime(DateTime.now()),
                        onTimeChange: (TimeOfDay time) {
                          print(
                              "What we get the value of the time is now $time");
                        },
                      ),
                    ),
like image 68
Mithun Adhikari Avatar answered Sep 20 '22 01:09

Mithun Adhikari