Gradient Timepicker

A beautiful gradient time picker for Flutter. Opens as a bottom sheet with smooth scroll-wheel selection for hour, minute, and AM/PM. The background gradient animates between a bright blue (AM) and deep navy (PM) theme.

---

Showcase

---

Features

• Wheel-style scroll pickers for hour, minute, and AM/PM
• Animated gradient background that shifts between AM and PM colour schemes
• Returns the selected TimeOfDay, or null if dismissed
• Accepts an optional initialTime; falls back to TimeOfDay.now()
• Safe-area aware bottom padding

---

Installation

flutter pub add gradient_timepicker

---

Usage

import 'package:gradient_timepicker/gradient_timepicker.dart';

// Inside a widget with a BuildContext:
final TimeOfDay? picked = await showTimePickerSheet(
  context: context,
  initialTime: TimeOfDay.now(),
);

if (picked != null) {
  print('Selected: ${picked.format(context)}');
}

---

API

showTimePickerSheet

Future<TimeOfDay?> showTimePickerSheet({
  required BuildContext context,
  TimeOfDay? initialTime,
  bool use24Hour = false,
  String buttonText = 'Done',
  TimePickerGradient gradient = TimePickerGradient.defaultGradient,
})

Parameter	Type	Required	Description
context	BuildContext	yes	The build context used to show the bottom sheet.
initialTime	TimeOfDay?	no	Pre-selected time. Defaults to TimeOfDay.now()
use24Hour	bool	no	Display a 24-hour clock without AM/PM. Defaults to false
buttonText	String	no	Label for the confirm button. Defaults to 'Done'
gradient	TimePickerGradient	no	Color palette for AM/PM states. Defaults to TimePickerGradient.defaultGradient

Returns the TimeOfDay chosen by the user, or null if the sheet is dismissed.

Built-in Gradients

Preset	AM	PM
TimePickerGradient.defaultGradient	Bright blue sky	Deep navy night
TimePickerGradient.frostedLight	Light blue-white	Dark teal
TimePickerGradient.moonrise	Blush lavender	Slate-charcoal plum
TimePickerGradient.mystic	Hazy grey-blue to mist	Grey-blue to deep slate
TimePickerGradient.opal	Pale lime-yellow to mauve	Olive-green to mauve

final TimeOfDay? picked = await showTimePickerSheet(
  context: context,
  gradient: TimePickerGradient.frostedLight,
);

---

Running Tests

flutter test --coverage

To view the generated coverage report you can use lcov:

genhtml coverage/lcov.info -o coverage/
open coverage/index.html

---