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.

Usage:

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.

Code:

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

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


class PickerDateTimeRouteState extends State {

  late Future selectedTime;
  String time = "-";

  @override
  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

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

          Align(
            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: (){
                showDialogTimePicker(context);
              },
            ),
          ),

        ],
      ),
    );
  }

  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,
            ),
            //.dialogBackgroundColor:Colors.blue[900],
          ),
          child: child!,
        );
      },
    );
    selectedTime.then((value) {
      setState(() {
        if(value == null) return;
        time = "${value.hour} : ${value.minute}";
      });
    }, onError: (error) {
      if (kDebugMode) {
        print(error);
      }
    });
  }
}

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

..

Properties:

• 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,