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.

Mariselamarish

your question seems to bit unclear. can you share the code what you have tried till now, and if any issues you have faced till now. there are libraries present regarding the date time picker you can check the out. – Specular

I just want to use the showTimePicker not as dialogue but as a widget, so that I can build on top of that and make custom widget.? – Mariselamarish

everything in flutter is a widget. so would like you to be precise about the behavior of date time picker you are looking for and if it's not present in public libraries you would probably need to build it out yourself or get some help. – Specular

showTimePicker is a dialogue that displays the TimePicker widget, right?. I want to use that TimePicker in my Own Widget. hope you got my problem now. – Mariselamarish

yeah I think I get what you are looking for that's why I replied you will need to build out your own library if you are looking for custom functionality / ui regarding date time picker and for that you'll need to first define what you are looking for and how It will look and work – Specular

It would be very easy to build my own widget because I will reuse the showTimePicker. TimePicker is a complex widget and currently, it's out of my scope. I want to use showTimePicker() as widget. – Mariselamarish

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

Fara

Answer 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,));

Yeoman

Answer 3

class TimePickerScreen extends StatefulWidget {
  @override
  _TimePickerScreenState createState() => _TimePickerScreenState();
}

class _TimePickerScreenState extends State<TimePickerScreen> {
  TimeOfDay _selectedTime = TimeOfDay.now();

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );
    if (picked != null && picked != _selectedTime)
      setState(() {
        _selectedTime = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected time: ${_selectedTime.format(context)}',
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text('Pick Time'),
            ),
          ],
        ),
      ),
    );
  }
}

Panicle