Flutter Time Picker Widget

This code demonstrates how to create a time picker widget in Flutter using the showTimePicker() method. The widget displays a time on the screen and allows users to pick a new time by showing a time picker dialog. The selected time is then displayed on the screen. 

The code also includes a helper class to format the selected time for display.


This widget can be used in any Flutter application that requires users to pick a time. It can be customized to fit the theme of the application by changing the colors and styles of the widget.


import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class PickerDateTimeRoute extends StatefulWidget {

  const PickerDateTimeRoute({super.key}); // Constructor for the widget

  PickerDateTimeRouteState createState() => PickerDateTimeRouteState(); // Creates the state for the widget

class PickerDateTimeRouteState extends State {

  late Future selectedTime;
  String time = "-";

  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Spacer(flex: 10), // A spacer widget to create some space between the top of the screen and the date display

            alignment: Alignment.center,
            width: double.infinity,
            height: 45,
            color: Colors.grey[300],
            Text(time), // Displays the date on the screen

            alignment: Alignment.center,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                  elevation: 0, backgroundColor: Theme.of(context).colorScheme.primary,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  padding: const EdgeInsets.symmetric(horizontal: 30)
              child: const Text("PICK TIME", style: TextStyle(color: Colors.white)),
              onPressed: (){


  void showDialogTimePicker(BuildContext context){
    selectedTime = showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
      builder: (BuildContext context, Widget? child) {
        return Theme(
          data: ThemeData.light().copyWith(
            colorScheme: ColorScheme.light(
              // primary: MyColors.primary,
              primary: Theme.of(context).colorScheme.primary,
              onPrimary: Colors.white,
              surface: Colors.white,
              onSurface: Colors.black,
          child: child!,
    selectedTime.then((value) {
      setState(() {
        if(value == null) return;
        time = "${value.hour} : ${value.minute}";
    }, onError: (error) {
      if (kDebugMode) {

// Helper class
class Utils {
  static String getFormattedDateSimple(int time) {
    DateFormat newFormat = DateFormat("MMMM dd, yyyy");
    return newFormat.format(DateTime.fromMillisecondsSinceEpoch(time));



  • selectedTime: A Future object that stores the user-selected time.
  • time: A String variable that stores the selected time in a formatted string.
  • showDialogTimePicker(): A function that displays the time picker dialog and updates the selectedTime and time variables accordingly.
  • Utils.getFormattedDateSimple(): A helper function that formats a given time in milliseconds to a readable string in the format "MMMM dd, yyyy".
Flutter Widgets,