ArcaneJaspr Codex
Documentation
🔍
ArcaneTimeDialog
Dialog for time selection
Live Demo
Time Dialog Time picker in dialog format

ArcaneTimeDialog#

A dialog component for selecting a time value.

Basic Usage#

ArcaneTimeDialog(
  isOpen: showTimeDialog,
  onClose: () => setState(() => showTimeDialog = false),
  onConfirm: (time) {
    setState(() {
      selectedTime = time;
      showTimeDialog = false;
    });
  },
)

Properties#

PropertyTypeDefaultDescription
isOpen bool required Whether dialog is visible
onClose VoidCallback? null Close handler
onConfirm ValueChanged<TimeOfDay> required Confirm handler
initialTime TimeOfDay? null Initial selected time
title String 'Select Time' Dialog title
confirmLabel String 'Confirm' Confirm button text
cancelLabel String 'Cancel' Cancel button text
use24Hour bool false Use 24-hour format

With Initial Time#

ArcaneTimeDialog(
  isOpen: showDialog,
  initialTime: TimeOfDay(hour: 9, minute: 30),
  onClose: () => close(),
  onConfirm: (time) => selectTime(time),
)

24-Hour Format#

ArcaneTimeDialog(
  isOpen: showDialog,
  use24Hour: true,
  title: 'Set Alarm',
  onClose: () => close(),
  onConfirm: (time) => setAlarm(time),
)

Examples#

Schedule Meeting#

ArcaneRow(
  gapSize: Gap.md,
  children: [
    ArcaneButton.secondary(
      label: 'Set Start Time',
      onPressed: () => setState(() => showStartDialog = true),
    ),
    ArcaneText(
      startTime != null
          ? '${startTime!.hour}:${startTime!.minute.toString().padLeft(2, '0')}'
          : 'Not set',
    ),
  ],
),
ArcaneTimeDialog(
  isOpen: showStartDialog,
  title: 'Meeting Start Time',
  initialTime: startTime,
  onClose: () => setState(() => showStartDialog = false),
  onConfirm: (time) {
    setState(() {
      startTime = time;
      showStartDialog = false;
    });
  },
)

Reminder Setup#

ArcaneTimeDialog(
  isOpen: showReminderDialog,
  title: 'Daily Reminder',
  use24Hour: true,
  confirmLabel: 'Set Reminder',
  onClose: () => close(),
  onConfirm: (time) => scheduleReminder(time),
)