Flutter: Tarih ve Saat Seçiciler (DatePicker & TimePicker)

Kullanıcılardan doğum tarihi, randevu saati gibi zamanla ilgili verileri almak için Flutter'ın sunduğu yerleşik showDatePicker ve showTimePicker fonksiyonlarını kullanırız.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ları deneyebilirsiniz:

DatePicker (Tarih Seçici)

Bir takvim arayüzü açarak kullanıcının gün, ay ve yıl seçmesini sağlar.

Temel Kullanım

Bu fonksiyon Future<DateTime?> döndürür, yani asenkrondur. Kullanıcının seçimi yapmasını beklemek için await kullanmalıyız.

DateTime? selectedDate;

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(), // Takvim açıldığında seçili gelen tarih
    firstDate: DateTime(2000),   // Seçilebilecek en erken tarih
    lastDate: DateTime(2025),    // Seçilebilecek en geç tarih
  );
  
  if (picked != null && picked != selectedDate) {
    setState(() {
      selectedDate = picked;
    });
  }
}

Bir butona basınca çağırmak için:

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

TimePicker (Saat Seçici)

Kullanıcının saat ve dakika seçmesini sağlar.

Temel Kullanım

Bu fonksiyon Future<TimeOfDay?> döndürür.

TimeOfDay selectedTime = TimeOfDay.now();

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: selectedTime,
    builder: (context, child) {
      return MediaQuery(
        // 24 saat formatı için zorlama (opsiyonel)
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
  );

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

Yerelleştirme (Localization)

Takvimin Türkçe (veya başka bir dilde) görünmesi için MaterialApp'inize yerelleştirme delegelerini eklemeniz gerekir.

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // İngilizce
    const Locale('tr', ''), // Türkçe
  ],
  // ...
)

Bunu yaptığınızda showDatePicker otomatik olarak cihazın diline göre (veya locale parametresi ile belirtilen dile göre) gün ve ay isimlerini gösterecektir.

Tema Özelleştirme

Picker renklerini uygulamanızın temasına uydurmak için builder parametresini kullanabilirsiniz.

showDatePicker(
  context: context,
  // ... parametreler
  builder: (context, child) {
    return Theme(
      data: Theme.of(context).copyWith(
        colorScheme: ColorScheme.light(
          primary: Colors.red, // Seçili gün rengi, başlık rengi
          onPrimary: Colors.white, // Seçili gün yazı rengi
          onSurface: Colors.black, // Takvimdeki diğer yazıların rengi
        ),
      ),
      child: child!,
    );
  },
);

Özet

• showDatePicker: Tarih seçimi için. DateTime döndürür.
• showTimePicker: Saat seçimi için. TimeOfDay döndürür.
• Asenkron: Her iki işlem de await ile beklenmelidir.
• Yerelleştirme: Takvimin dilelendirilmesi için flutter_localizations paketi gereklidir.