DEV Community

Cover image for Flutter Widget Keys ­čĺź ­čîî ÔťĘ
G├╝lsen Keskin
G├╝lsen Keskin

Posted on

Flutter Widget Keys ­čĺź ­čîî ÔťĘ

Widget Keys

State ve Element problemlerinin en kolay ├ž├Âz├╝m├╝n├╝ sunay─▒m: keys.

Koleksiyonlarda widget'larla ├žal─▒┼č─▒rken, onlara key vermek, Flutter'─▒n ayn─▒ t├╝rden iki widget'─▒n ger├žekte ne zaman farkl─▒ oldu─čunu bilmesine yard─▒mc─▒ olur. Bu, ├Âzellikle ├žok ├žocuklu widget'lar─▒n child'lar─▒ i├žin kullan─▒┼čl─▒d─▒r. ├ço─ču zaman, bir sat─▒rdaki veya s├╝tundaki t├╝m ├žocuklar ayn─▒ t├╝rdendir, bu nedenle ├žocuklar─▒ ay─▒rt etmek i├žin Flutter'a fazladan bir bilgi vermek idealdir.

_buttons = <Widget>[
  FancyButton(
    key: _buttonKeys.first, //Flutter'─▒n bu widget'─▒ ayn─▒ t├╝rdeki widget'lar aras─▒nda tan─▒mlamas─▒n─▒ sa─člayan Unique key 
    child: Text(
      "Decrement",
      style: TextStyle(color: Colors.white),
    ),
    onPressed: _decrementCounter,
  ),
  FancyButton(
    key: _buttonKeys.last,
    child: Text(
      "Increment",
      style: TextStyle(color: Colors.white),
    ),
    onPressed: _incrementCounter,
  ),
];
Enter fullscreen mode Exit fullscreen mode

Anahtar(key) t├╝rleri ve bunlar─▒n ne zaman kullan─▒laca─č─▒:

Flutter da birka├ž t├╝r anahtar vard─▒r: ValueKey, ObjectKey, UniqueKey, GlobalKey, ve PageStorageKey ve bir ┼čekilde ili┼čkilidir.

PageStorageKey, LocalKey'in bir alt s─▒n─▒f─▒ olan ValueKey<T>'nin bir alt s─▒n─▒f─▒d─▒r. ValueKey<T> ise, Key'in bir alt s─▒n─▒f─▒d─▒r ve ObjectKey , UniqueKey ve ayr─▒ca LocalKey'i uygular.

Key'ler iki gruba ayr─▒l─▒r: global ve local

Global keys

Global anahtarlar, state'i y├Ânetmek ve widget ├Â─čelerini widget a─čac─▒ ├ževresinde ta┼č─▒mak i├žin kullan─▒l─▒r. ├ľrne─čin, bir checkbox g├Âr├╝nt├╝leyen tek bir widget ├Â─česinde bir GlobalKey'e sahip olabilir ve widget ├Â─česini birden ├žok sayfada kullanabilirsiniz. Bu anahtar, framework 'e bu widget ├Â─česinin ayn─▒ ├Ârne─čini(instance) kullanmas─▒n─▒ s├Âyler. Bu nedenle, bu checkbox'─▒ g├Ârmek i├žin farkl─▒ sayfalara gitti─činizde, i┼čaretli state'i ayn─▒ kalacakt─▒r. Checkbox A sayfas─▒nda se├žili ise B sayfas─▒nda de se├žili olacakt─▒r.

State'i y├Ânetmek i├žin global anahtarlar─▒n kullan─▒lmas─▒n─▒n tavsiye edilmedi─čini (benim taraf─▒mdan veya Flutter ekibi taraf─▒ndan) not etmek ├Ânemlidir. Global anahtarlar s─▒k ÔÇőÔÇőkullan─▒lmaz ve performans─▒ etkiler; local anahtarlar─▒ kullanmak daha yayg─▒nd─▒r.

Local keys

Local anahtarlar─▒n t├╝m├╝, anahtar─▒ olu┼čturdu─čunuz build context'e g├Âre kapsamland─▒r─▒lm─▒┼č olmalar─▒ bak─▒m─▒ndan benzerdir. Hangisinin kullan─▒laca─č─▒na karar vermek, duruma ba─čl─▒d─▒r:

ÔťĘ ValueKey<T> De─čer anahtarlar─▒, anahtar ekledi─činiz nesne bir t├╝r constant, unique property'e sahip oldu─čunda en iyisidir. ├ľrne─čin, bir todo list uygulamas─▒nda, bir todo'yu g├Âr├╝nt├╝leyen her widget'─▒n muhtemelen sabit ve benzersiz (unique) bir Todo.text'i vard─▒r.

ÔťĘ ObjectKey Nesne anahtarlar─▒, ayn─▒ t├╝rden ancak property value'lar─▒ (├Âzellik de─čerleri) farkl─▒ olan nesneleriniz oldu─čunda m├╝kemmeldir. Bir e-ticaret uygulamas─▒nda "Product" adl─▒ bir nesne d├╝┼č├╝n├╝n: iki ├╝r├╝n ayn─▒ ba┼čl─▒─ča sahip olabilir (iki farkl─▒ sat─▒c─▒ bilgisayar satabilir). Ve bir sat─▒c─▒n─▒n birden fazla ├╝r├╝n├╝ olabilir. Bir ├╝r├╝n├╝ benzersiz yapan, ├╝r├╝n ad─▒ ile sat─▒c─▒ ad─▒n─▒n birle┼čimidir.
Bu nedenle anahtar, bir ObjectKey'e iletilen de─či┼čmez(literal) bir nesnedir:

Key key = ObjectKey({
    "seller": product.seller,
    "product": product.title
})
Enter fullscreen mode Exit fullscreen mode

ÔťĘ UniqueKey Bir koleksiyonun alt ├Â─čelerine anahtar ekliyorsan─▒z ve alt ├Â─čeler olu┼čturulana kadar de─čerlerini bilmiyorsa, unique(benzersiz) anahtarlar kullan─▒labilir. ├ľrnek uygulamada, ├╝r├╝n kartlar─▒ olu┼čturulana kadar renklerini bilmezler, bu nedenle unique key iyi bir se├ženektir.

ÔťĘ PageStorageKey Bir scroll'un konumu gibi sayfa bilgilerini depolamak i├žin kullan─▒lan ├Âzel bir anahtard─▒r.

Not:
Anahtarlar─▒n, ├Âzellikle global anahtarlar─▒n kullan─▒lmas─▒ genellikle gerekli de─čildir veya ├Ânerilmez. Global anahtarlar neredeyse her zaman bir t├╝r global state y├Ânetimi ile de─či┼čtirilebilir. Bu kural─▒n istisnalar─▒, PageStorageKey gibi baz─▒ ├Âzel anahtarlar─▒n kullan─▒lmas─▒d─▒r.

Resource: Flutter in Action chapter-3

Top comments (0)