Flutter Key Kullanımı

Herkese Merhaba! Flutter'da Key kullanımları çok önemli olmasına rağmen malesef yeterli kaynak bulmakta zorluk çekiyoruz. Bu nedenle beraber Key kullanımlarını inceleyelim istedim. Bugün öncelikli amacımız "Key Nedir?"'i anlamaya çalışmak olacak. Gelin birkaç kod parçası üzerinden keyleri anlamaya çalışalım.

Key Nedir?


Biliyoruz ki Flutter'da her şey widgetlar üzerinde dönmekte. Kullandığımız widgetlara keyler vererek, uygulamamızın ağaç yapısında, widgetımızın stateini yani durumunu tutabiliriz. Bunun için bugün, hepimizin kullandığı ve en iyi anlayabileceğimiz örnek olan, Form widgetlarına verdiğimiz Global Key'i inceleyeceğiz.


Kısaca Form'lara neden key verdiğimizi anlamaya çalışalım. Örneğin bir kullanıcı girişi sayfası yazdığımızı düşünelim. Formlarda doğrulama ve kayıt işlemlerini nasıl gerçekleştiririz. Birçoğumuzun dikkat etmeden kullandığını biliyorum, gelin şimdi _formKey'i neden kullandığımızı anlayalım. Öncelikle aşağıda gördüğümüz şekilde formların state'ini tutan bir key yaratarak başlayalım. Ayrıca email ve şifre bilgilerini tutacak değişkenleri de unutmadan ekleyelim.


final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String? email;
String? password;

Kod parçasından da anlaşılacağı gibi bir Global Key yaratıyoruz. Global Key (daha sonrasında ayrıntılı olarak tekrar inceleyeceğimiz için burada kısa bir bilgi verdim) atandığı widgetın state'ini tutar ve widget durumunun, widget ağacının farklı bir yerinde değiştirilebilmesine olanak sağlar. Şimdi bu yarattığımız _formKey değişkenini Form widgetımızın key parametresine atayalım. Form Widget'ına ait kod parçasını aşağıda görebilirsiniz.


Form(
    key: _formKey,    // Yarattığımız key'i Form widgetımıza bağladık.
    child: Column(
      children: [
        _formField("E-mail",
            validator: (email) {
              if (email.contains("@"))
                return null;
              else
                return "Email adresinizi doğru girdiğinizden emin olunuz.";
            },
            onSaved: (text) => email = text),
        _formField("Şifre",
            validator: (password) {
              if (password.contains("@"))
                return null;
              else
                return "Email adresiniz en az 6 karakter uzunluğunda olmalıdır.";
            },
            onSaved: (text) => password = text),
      ],
    )),

Şimdi de "Giriş Yap" butonuna tıklandığında işlemlerin nasıl ilerlediğini inceleyelim ve key'lerin çalışma mantığını kavramaya çalışalım.