CODEWITHSUNDEEP
flutterdatetimepicker
rahul Kushwaha
rahul Kushwaha

Reputation: 2829

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.

Upvotes: 7

Views: 15229

Answers (3)

Sarkheel Mughal
Sarkheel Mughal

Reputation: 91

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

Upvotes: 0

Mithun Adhikari
Mithun Adhikari

Reputation: 569

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

Upvotes: 5

Dhaval Kansara
Dhaval Kansara

Reputation: 3921

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

Upvotes: 3

Related Questions