How to use showTimePicker as Widget in flutter?

Question

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.

Solution 1

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

Solution 2

You have to open showTimePicker on click of any widget. So you can simply put your code of showTimePicker inside onTap property of the GestureDetector as shown below.

GestureDetector(
    onTap: () async {
        TimeOfDay picked = await showTimePicker(
        context: context,
        initialTime: TimeOfDay.now(),
        builder: (BuildContext context, Widget child) {
           return MediaQuery(
           data: MediaQuery.of(context)
           .copyWith(alwaysUse24HourFormat: true),
           child: child,
           );
        },);
     },
     child: Text("SetTime",textAlign: TextAlign.center,));