Flutter DateTimePicker İle Kullanıcıya Tarih Seçtirme

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda DateTimePicker fonksiyonunu ve bu fonksiyonu kullanarak kullanıcıya tarih seçtirmeyi anlatacağım. Hadi başlayalım !

Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme çerçevesidir. Flutter, hızlı ve ölçeklenebilir uygulamalar geliştirmek için birçok araç ve özellik sunar. Bu özelliklerden biri, kullanıcıların tarih ve saat seçmelerine olanak tanıyan DateTimePicker’dir.

DateTimePicker, kullanıcının tarih ve saat seçmesine yardımcı olan bir widgettir. Flutter’da DateTimePicker, showDatePicker() ve showTimePicker() fonksiyonları kullanılarak oluşturulabilir. Bu fonksiyonlar, tarih seçici ve saat seçici için ayrı ayrı kullanılabilir.

Öncelikle, tarih seçici için showDatePicker() fonksiyonunu kullanarak başlayalım. Aşağıdaki örnek kod, tarih seçicinin nasıl kullanılacağını göstermektedir:

import 'package:flutter/material.dart';

class DatePickerDemo extends StatefulWidget {
  @override
  _DatePickerDemoState createState() => _DatePickerDemoState();
}

class _DatePickerDemoState extends State<DatePickerDemo> {
  DateTime _selectedDate;

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2021),
        lastDate: DateTime(2025));
    if (picked != null && picked != _selectedDate)
      setState(() => _selectedDate = picked);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          onPressed: () => _selectDate(context),
          child: Text('Select date'),
        ),
        Text(_selectedDate == null ? 'Tarih seçilmedi' : 'Seçilen tarih: ${_selectedDate.toString()}'),
      ],
    );
  }
}

Yukarıdaki kodda, _selectDate() adlı bir fonksiyon oluşturduk. Bu fonksiyon, showDatePicker() fonksiyonunu kullanarak tarih seçiciyi açar. initialDate özelliği, tarih seçicinin varsayılan değerini ayarlar. firstDate ve lastDate özellikleri, seçilebilecek tarihlerin aralığını belirler. Seçilen tarih, _selectedDate adlı değişkene atanır ve ekranda gösterilir.

Şimdi, saat seçici için showTimePicker() fonksiyonunu kullanarak örnek bir kod yazalım:

import 'package:flutter/material.dart';

class TimePickerDemo extends StatefulWidget {
  @override
  _TimePickerDemoState createState() => _TimePickerDemoState();
}

class _TimePickerDemoState extends State<TimePickerDemo> {
  TimeOfDay _selectedTime;

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (picked != null && picked != _selectedTime)
      setState(() => _selectedTime = picked);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          onPressed: () => _selectTime(context),
          child: Text('Select time'),
        ),
        Text(_selectedTime == null ? 'Saat seçilmedi' : 'Seçilen saat: ${_selectedTime.format(context)}'),
      ],
    );
  }
}

Yukarıdaki kodda, _selectTime() adlı bir fonksiyon oluşturduk. Bu fonksiyon, showTimePicker() fonksiyonunu kullanarak saat seçiciyi açar. initialTime özelliği, saat seçicinin varsayılan değerini ayarlar. Seçilen saat, _selectedTime adlı değişkene atanır ve ekranda gösterilir. format(context) fonksiyonu, seçilen saati kullanıcının yerel saat dilimine göre biçimlendirir.

Sonuç

Sonuç olarak, Flutter’da tarih ve saat seçici kullanımı oldukça basittir. showDatePicker() ve showTimePicker() fonksiyonları, kullanıcının tarih ve saat seçmesine olanak tanır. Bu fonksiyonlar, uygulamalarınızda kullanıcıların tarih ve saat seçmelerine yardımcı olmak için harika bir araçtır.

Evet DateTimePicker fonksiyonu bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.