Flutter: Datums- und Zeitauswahl (DatePicker & TimePicker)

Für zeitbezogene Angaben wie Geburtsdatum oder Termin nutzen wir die in Flutter enthaltenen Funktionen showDatePicker und showTimePicker.

Live-Demo

Sie können diese Widgets im interaktiven Beispiel unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

DatePicker

Öffnet eine Kalenderansicht, in der Tag, Monat und Jahr ausgewählt werden.

Grundlegende Verwendung

Diese Funktion liefert ein Future<DateTime?> zurück, ist also asynchron. Wir müssen await verwenden, um auf die Auswahl zu warten.

DateTime? selectedDate;

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(), // Date initially selected when calendar opens
    firstDate: DateTime(2000),   // Earliest selectable date
    lastDate: DateTime(2025),    // Latest selectable date
  );
  
  if (picked != null && picked != selectedDate) {
    setState(() {
      selectedDate = picked;
    });
  }
}

So rufen Sie sie beim Antippen eines Buttons auf:

ElevatedButton(
  onPressed: () => _selectDate(context),
  child: Text(selectedDate == null 
      ? 'Select Date' 
      : "${selectedDate!.day}/${selectedDate!.month}/${selectedDate!.year}"),
)

TimePicker

Ermöglicht die Auswahl von Stunde und Minute.

Grundlegende Verwendung

Diese Funktion liefert ein Future<TimeOfDay?> zurück.

TimeOfDay selectedTime = TimeOfDay.now();

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: selectedTime,
    builder: (context, child) {
      return MediaQuery(
        // Force 24-hour format (optional)
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
  );

  if (picked != null && picked != selectedTime) {
    setState(() {
      selectedTime = picked;
    });
  }
}

Lokalisierung

Damit der Kalender in der gewünschten Sprache erscheint, müssen Sie Ihrer MaterialApp Localization-Delegates hinzufügen.

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // English
    const Locale('tr', ''), // Turkish
  ],
  // ...
)

Danach zeigt showDatePicker Tages- und Monatsnamen automatisch in der Gerätesprache an (oder in der über den Parameter locale angegebenen Sprache).

Theme anpassen

Über den Parameter builder können Sie die Farben der Auswahl an das Theme Ihrer App anpassen.

showDatePicker(
  context: context,
  // ... parameters
  builder: (context, child) {
    return Theme(
      data: Theme.of(context).copyWith(
        colorScheme: ColorScheme.light(
          primary: Colors.red, // Selected day color, header color
          onPrimary: Colors.white, // Selected day text color
          onSurface: Colors.black, // Color of other text in the calendar
        ),
      ),
      child: child!,
    );
  },
);

Zusammenfassung

• showDatePicker: Für die Datumsauswahl. Liefert ein DateTime.
• showTimePicker: Für die Zeitauswahl. Liefert ein TimeOfDay.
• Asynchron: Auf beide Vorgänge muss mit await gewartet werden.
• Lokalisierung: Für die Kalenderlokalisierung wird das Paket flutter_localizations benötigt.