DatePicker widget

A DatePicker megjelenít egy konfigurálható dátum választó modal-t. A material.dart része, nem igényli külső csomag telepítését.

Használata

A showDatePicker függvénnyel lehet megjeleníteni. Én készítettem hozzá egy metódust, amit át lehet adni mondjuk egy gomb onPressed eseménykezelőjéhez:

  void _presentDatePicker() {
    final now = DateTime.now();
    final firstDate = DateTime(now.year - 1, now.month, now.day);
    showDatePicker(
      context: context,
      initialDate: now,
      firstDate: firstDate,
      lastDate: now,
    );
  }

A DatePickernek a fenti négy paramétere fontos, hogy meg legyen adva:

• A context a widget context-ját jelenti, amiről itt írtam.
• Az initaldate az a dátum, ami a DatePicker megjelenésekor ki van választva. Beállíottam neki, hogy ez legyen az aktuális dátum.
• A firstDate az a legkisebb választható dátum.
• A lastDate pedig a legnagyobb kiválasztható dátum.

Gyakorlatilag ezt kapjuk eredményül, amikor megjelenítjük a dátumválasztót:

Kiválasztott dátum tárolása / kezelése: then

A DatePicker visszaadja a kiválasztott értéket, de ez valami Future típusú adat:

A Future egy fontos Dart típus. A Future egy objektum, ami beburkol (wrappel) egy olyan értéket, ami még nem létezik, de létezni fog a jövőben. Tisztára a „Vissza a jövőbe” feeling :).

Oké, akkor jöjjön a magyarázat: a showDatePicker tehát megjelenít nekünk egy dátumválasztót. Amikor az megjelenik, akkor még nem választottunk dátumot. Tehát ez a jövőben fog megtörténni. A Flutter tudja, hogy valamilyen dátumot majd a jövőben ki fogunk választani, éppen ezért lehetővé teszi, hogy rendelkezésünkre álljon egy függvény (then()), ami majd akkor lesz futtatva, ha dátumot választunk.

Tehát ez a Future objektum azonnal visszatér, de még nem tartalmazza a kiválasztott dátumot.A Future objektumnak elérhető a then() metódusa, aminek át lehet adni például egy névtelen függvényt, ami majd megkapja az értéket, amit a DatePicker-en választunk.

    showDatePicker(
      context: context,
      initialDate: now,
      firstDate: firstDate,
      lastDate: now,
    ).then((value) {
      
    });

A then() tehát akkor fog lefutni, amikor már választottunk egy dátumot.

async, await

A then() helyett van egy kényelmesebb megoldás, az async kulcsszó használata, amit a metódus neve utáni () és a metódus törzsét kezdő { között adunk meg:

void _presentDatePicker() async {

Ennek párjaként kötelezően meg kell adni az await kulcsszót az elé a kódrészlet elé, ami a jövőbeni értéket adja:

await showDatePicker(

A jövőben megkapott értéket változóba tudjuk tenni:

final pickedDate = await showDatePicker(

Azt észben kell tartani, hogy a változó tartalma azonnal még nem áll a rendelkezésre, hiszen Future típusú adatot tárol. De ami tök jó, hogy az await „blokk” utáni első utasítás akkor fog lefutni, amikor már megérkezik ez az érték:

    final pickedDate = await showDatePicker(
      context: context,
      initialDate: now,
      firstDate: firstDate,
      lastDate: now,
    );
    // await után először ez fut le:
    print(pickedDate);

Vagy bele is rakhatjuk egy változóba, amit a setState-en belül egyenlővé teszünk a kiválasztott dátummal:

  DateTime? _selectedDate;

  void _presentDatePicker() async {
    final now = DateTime.now();
    final firstDate = DateTime(now.year - 1, now.month, now.day);
    final pickedDate = await showDatePicker(
      context: context,
      initialDate: now,
      firstDate: firstDate,
      lastDate: now,
    );
    // await után először ez fut le:
    setState(() {
      _selectedDate = pickedDate;
    });

És ezt a _selectedDate értéket az osztályon belül fel tudjuk használni:

Text(_selectedDate == null
      ? 'No date selected'
      : formatter.format(_selectedDate!)),

Egy Text widgettel megjelenítjük. És mivel a formatter olyan értéket vár, ami nem lehet null, a _selectedDate utáni ! jellel kényszerítjük a Dart-ot arra, hogy feltételezze, hogy nem null érték fog jönni.

Amikor megjelenik a dátumválasztó:

És miután választottunk: