Custom Time Picker #

A Flutter package that extends the Material Design time picker with additional callback functionality, allowing you to listen to time changes and confirmations in real-time.

Features #

• onChange callback: Get notified every time the user changes the selected time (hours or minutes)
• onConfirm callback: Get notified when the user confirms their time selection
• Custom child widget: Display a custom widget above the action buttons (e.g., show current selection)
• Full Material Design support: Works seamlessly with Material 2 and Material 3
• Theme customization: Fully customizable with TimePickerThemeData
• All original features: Includes all features from Flutter's built-in time picker

Getting started #

Add this to your package's pubspec.yaml file:

dependencies:
  custom_time_picker: ^0.0.1

Then run:

flutter pub get

Import the package in your Dart code:

import 'package:custom_time_picker/custom_time_picker.dart';

Usage #

Basic Usage #

import 'package:flutter/material.dart';
import 'package:custom_time_picker/custom_time_picker.dart' as custom;

final TimeOfDay? picked = await custom.showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

With onChange Callback #

Get real-time updates as the user changes the time:

await custom.showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  onChange: (TimeOfDay time) {
    print('Time changed to: ${time.format(context)}');
    // Update your UI or state here
  },
);

With onConfirm Callback #

Get notified when the user confirms their selection:

await custom.showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  onConfirm: (TimeOfDay time) {
    print('Time confirmed: ${time.format(context)}');
    // Save the time or perform other actions
  },
);

Complete Example with Both Callbacks and 24-Hour Format #

final TimeOfDay? picked = await custom.showTimePicker(
  context: context,
  initialTime: selectedTime ?? TimeOfDay.now(),
  onChange: (TimeOfDay time) {
    setState(() {
      currentChangingTime = time;
    });
  },
  onConfirm: (TimeOfDay time) {
    print('User confirmed: ${time.format(context)}');
  },
  builder: (BuildContext context, Widget? child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
      child: Theme(
        data: Theme.of(context).copyWith(
          timePickerTheme: TimePickerThemeData(
            backgroundColor: const Color(0xFF2D2D2D),
            hourMinuteShape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
          ),
        ),
        child: child!,
      ),
    );
  },
);

Using 24-Hour Format #

To display the time picker in 24-hour format (0-23) instead of 12-hour format with AM/PM:

await custom.showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget? child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
      child: child!,
    );
  },
);

Using Custom Child Widget #

Display a custom widget above the OK/Cancel buttons. This is perfect for showing additional information or custom UI:

await custom.showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  child: Container(
    padding: const EdgeInsets.all(16),
    margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    decoration: BoxDecoration(
      color: Colors.blue.withOpacity(0.1),
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Text(
      'Select your preferred time',
      style: TextStyle(fontSize: 16),
    ),
  ),
);

Example App #

Check out the example directory for a complete dark-themed example app that demonstrates:

• Real-time time change tracking with onChange callback
• Confirmation callbacks with onConfirm
• 24-hour time format
• Beautiful dark theme customization
• Callback event logging

To run the example app:

cd example
flutter run

Additional Information #

This package is based on Flutter's built-in Material time picker and extends it with additional callback functionality. All original parameters and features from the standard showTimePicker function are supported.

Parameters #

• onChange: ValueChanged<TimeOfDay>? - Called when the time is changed
• onConfirm: ValueChanged<TimeOfDay>? - Called when the time is confirmed
• child: Widget? - Optional widget to display above the action buttons
• All other parameters from Flutter's showTimePicker are supported

Note on Import Conflicts #

If you're also using Flutter's built-in time picker, you may need to use a prefix to avoid naming conflicts:

import 'package:custom_time_picker/custom_time_picker.dart' as custom;

// Then use it as:
custom.showTimePicker(...)

License #

This package is licensed under the BSD 3-Clause License.

This package is based on Flutter's Material Design time picker implementation, which is also licensed under the BSD 3-Clause License. See the LICENSE file for details.