A text form field widget to open a time picker on its tap

time_picker_widget.dart

import 'package:flutter/material.dart';

class TimePickerWidget extends StatefulWidget {
  TimePickerWidget({Key? key, required this.onTimeSelected, required this.label}) : super(key: key);

  final String label;

  final Function(TimeOfDay) onTimeSelected;

  @override
  _TimePickerWidgetState createState() => _TimePickerWidgetState();
}

class _TimePickerWidgetState extends State<TimePickerWidget> {
  final TextEditingController controller = TextEditingController();

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? selectedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (selectedTime != null) {
      final hour = selectedTime.hour.toString().padLeft(2, '0');
      final minute = selectedTime.minute.toString().padLeft(2, '0');
      controller.text = '$hour:$minute';
      widget.onTimeSelected(selectedTime);
    }
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      readOnly: true,
      controller: controller,
      onTap: () {
        _selectTime(context);
      },
      decoration: InputDecoration(
        labelText: widget.label,
        border: null
      ),
    );
  }
}