Dismissible widget

A Dismissible widget lehetővé teszi, hogy a képernyőről egy widget eltávolítható legyen azáltal, hogy az ujjunkkal „kihúzzuk” a képernyőről.

Ez a kiinduló helyzet kódja, ahol egy ListView widgettel megjelenítünk egy listát:

ListView.builder(
  itemCount: expenses.length,
  itemBuilder: (ctx, index) => ExpenseItem(expenses[index]),
);

Jön a Dismissible

A Dismissible két kötelező paraméterrel rendelkezik, key és child:

Dismissible(key: key, child: child)

Ha a fenti példánál maradunk, akkor nyilvánvaló, hogy a child az a listaelem lesz:

Dismissible(key: key, child: ExpenseItem(expenses[index]))

A key paraméterrel azonosítja a Flutter az egyes widgeteket, és pontosan szeretné tudni, hogy melyik widgetet kell majd eltüntetni a képernyőről.

Úgy lesz egyedi kulcsunk a widgetekhez, hogy használjuk a beépített ValueKey() konstruktor függvényt. Ez kreál egy key objektumot, amit a Dismissible widgetnél tudunk használni a key értékeként:

Dismissible(key: ValueKey(),

A ValueKey egy input paramétert vár, amiben a valami egyedi értéket adunk a kulcsnak. Ez esetünkben egyszerűen kivitelezhető, mert megkapja a listaelem indexét, azaz sorszámát a listában:

Dismissible(key: ValueKey(expenses[index]),

Viszont fontos tudni, hogy a legtöbb widgetnél egyáltalán nem kell aggódni a kulcsok miatt és nem kell így manuálisan beállítani. A Dismissible azonban ilyen kis kakukktojás :).

Mindezek után a listaelemet, ha elkezdjük balra húzni, akkor előbb utóbb ki is tudjuk húzni a képernyőről és végül eltűnik a listából:

Bár ezzel még nem végeztünk teljes munkát, mert bár vizuálisan nincs a képernyőn már a listaelem, magából a listából kód szinten vagyis a memóriában nem tűnt el.

onDismissed

Az onDismissed paraméter fogja ezt tudni megoldani nekünk, ami egy függvényt fog futtatni, akkor amikor a listaelem (widget) eltűnt a képernyőről. Vagyis a függvénnyel fogjuk törölni a kapcsolódó listaelemet a listát tároló változóból.

Ehhez először is készítünk egy törlő metódust:

  void _removeExpense(Expense expense) {
    setState(() {
      _registeredExpenses.remove(expense);
    });
  }

Látszik, hogy ez valahol egy StatefulWidget-en belül van, mert a setState-el azt is megoldjuk, hogy a képernyő újra update-elődjön.

A Dismissible widgetnek pedig megadjuk az onDismissed paramétert:

Dismissible(
  key: ValueKey(expenses[index]),
  onDismissed: (direction) {
    onRemoveExpense(expenses[index]);
  },

Az onDismissed tehát egy függvényt vár. Méghozzá egy olyan függvényt aminek a paramétere a direction, azaz a képernyőről való kihúzás iránya (left vagy right). Minket ez most nem érdekel, de ennek ellenére ott kell lennie a direction-nek paraméteként.

A függvény törzsében meghívtuk a törlést elvégző metódust is.

Dismissible dizájn

Ha azt szeretnénk, hogy a húzás közben más legyen például a háttérszín, akkor a background tulajdonságot kell használni.

Dismissible(
        key: ValueKey(expenses[index]),
        background: ,

Ez egy widget-et vár értékként. Így megadhatjuk a Container widgetet, mert ennek van sok-sok paramétere amit használni lehet:

A Container-nek a color tulajdonsága használható háttérszínként:

background: Container(color: Colors.red),

Az eredmény ilyen lesz:

Téma használatával pedig:

background: Container(color: Theme.of(context).colorScheme.error),

Amikor egy színsémát létrehozunk a seedColor-ral (lásd a Témák használata (Theming) posztban), akkor a színfalak mögött a Flutter létrehoz sokféle árnyalatot és variációt az adott színből. Ezeket az árnyalatokat és variációkat aztán különféle helyzetekben tudjuk használni. Például hibák esetére is létrejön egy árnyalat, amit az error tulajdonságon keresztül érünk el, ahogy a fenti kódmintában is látszik.

Ez pedig így néz ki használat közben:

A margin-t is meg lehet neki adni, amit szintén a témában hoztunk létre:

// így
margin: Theme.of(context).cardTheme.margin,

// vagy pedig így
margin: EdgeInsets.symmetric(
          horizontal: Theme.of(context).cardTheme.margin!.horizontal),