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)

🌚 Life is too short to browse without dark mode