Bölüm 4 — Konu 15: Form, TextField/TextFormField, GlobalKey<FormState>, Validasyon

Bölüm 4'e hoş geldin. Bu derste, kullanıcıdan veri almayı (form doldurma) öğreneceğiz — bu, Bölüm 2'de öğrendiğimiz StatefulWidget/setState() bilgisinin gerçek bir kullanım alanı.

#TextField — En Temel Metin Girişi

TextField(
  decoration: InputDecoration(
    labelText: 'İsim',
    border: OutlineInputBorder(),
  ),
)

TextField, kullanıcının serbest metin girebildiği bir widget'tır. Ama dikkat et — bu widget, girdiğin metni kendi başına saklamaz, sadece gösterir. Girilen metne erişmek için bir controller gerekir.

#TextEditingController — Girdiye Programatik Erişim

class GirisFormu extends StatefulWidget {
  const GirisFormu({super.key});

  @override
  State<GirisFormu> createState() => _GirisFormuState();
}

class _GirisFormuState extends State<GirisFormu> {
  final TextEditingController _isimController = TextEditingController();

  @override
  void dispose() {
    _isimController.dispose(); // Bölüm 4 Konu 17'de dispose'u tam işleyeceğiz
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: _isimController),
        ElevatedButton(
          onPressed: () {
            print('Girilen isim: ${_isimController.text}');
          },
          child: Text('Yazdır'),
        ),
      ],
    );
  }
}

_isimController.text, Dart Bölüm 2'de öğrendiğimiz String tipinde, kullanıcının o an girdiği metni verir. TextEditingController, Dart Bölüm 11 Konu 52'de öğrendiğimiz cascade notasyonuna benzer bir kalıpla da kullanılabilir (TextEditingController()..text = 'Başlangıç değeri').

dispose() neden çağrılıyor? Bölüm 4 Konu 17'de bunu tam işleyeceğiz, ama şimdiden bilmen faydalı: TextEditingController, Dart Bölüm 13 Konu 62'de öğrendiğimiz garbage collection'ın otomatik olarak temizleyemediği bazı kaynakları (native platform kaynakları) tutar — bu yüzden elle serbest bırakılması gerekir, tıpkı Dart Bölüm 13 Konu 64'te (FFI) öğrendiğimiz "elle bellek yönetimi" istisnasına benzer bir durum.

#Form ve TextFormField — Yapılandırılmış Form Yönetimi

Tek tek TextField'ları yönetmek yerine, Flutter, birden fazla alanı gruplandırıp birlikte doğrulamanı sağlayan Form widget'ını sunar:

class KayitFormu extends StatefulWidget {
  const KayitFormu({super.key});

  @override
  State<KayitFormu> createState() => _KayitFormuState();
}

class _KayitFormuState extends State<KayitFormu> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: 'E-posta'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'E-posta boş olamaz';
              }
              if (!value.contains('@')) {
                return 'Geçerli bir e-posta girin';
              }
              return null; // null = geçerli, hata yok
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                print('Form geçerli!');
              }
            },
            child: Text('Gönder'),
          ),
        ],
      ),
    );
  }
}

#GlobalKey<FormState> — Ne İşe Yarıyor?

Bu, ilk bakışta kafa karıştırıcı görünebilir — parça parça açalım.

GlobalKey, bir widget'a "dışarıdan, doğrudan erişim" sağlayan özel bir anahtardır. Normalde, Flutter'da bir widget'ın State'ine (Bölüm 2 Konu 6'da öğrendiğimiz State sınıfını hatırla), sadece o widget'ın kendisi (kendi setState()'i aracılığıyla) erişebilir. GlobalKey, bu kuralın bilinçli bir istisnasıdır — widget ağacının dışından, o widget'ın State'ine doğrudan referans almanı sağlar.

final _formKey = GlobalKey<FormState>(); // GENERİC! Dart Bölüm 9'u hatırla

GlobalKey<FormState> — Dart Bölüm 9'da öğrendiğimiz generic sınıflar burada karşımıza çıkıyor! GlobalKey<T>, "T tipinde bir State'e erişim sağlayan anahtar" demek — burada T, FormState (Form widget'ının kendi State sınıfı).

Form(
  key: _formKey, // bu anahtarı Form widget'ına "veriyoruz"
  child: ...,
)

_formKey.currentState!.validate()

currentState, _formKey'in bağlı olduğu widget'ın o anki State nesnesini döndürür — bu, FormState? tipindedir (nullable, çünkü widget henüz oluşturulmamış olabilir). ! (Dart Bölüm 2'de öğrendiğimiz null assertion operatörü) ile "bu kesinlikle null değil" diyoruz — çünkü Form widget'ı zaten build() içinde oluşturulduğu için, bu noktada State'in var olduğundan eminiz.

.validate(), Form içindeki tüm TextFormField'ların validator fonksiyonlarını sırayla çalıştırır ve hepsi null döndürürse (yani hata yoksa) true döner.

#validator Fonksiyonu — Dart Bilginle Çözümleme

validator: (value) {
  if (value == null || value.isEmpty) {
    return 'E-posta boş olamaz';
  }
  return null;
}

Bu, Dart Bölüm 5'te öğrendiğimiz anonim fonksiyondur — String? parametre alır (kullanıcının girdiği metin, henüz hiçbir şey girilmemişse null olabilir), String? döndürür:

• null döndürürse → "hata yok, geçerli."
• Bir String döndürürse → bu string, hata mesajı olarak kullanıcıya gösterilir.

Bu, Dart Bölüm 2'de öğrendiğimiz null safety'nin, "var/yok" (hata var/yok) durumunu ifade etmek için yaratıcı bir kullanımı.

#Birden Fazla Alan ile Tam Bir Form

class KayitFormu extends StatefulWidget {
  const KayitFormu({super.key});

  @override
  State<KayitFormu> createState() => _KayitFormuState();
}

class _KayitFormuState extends State<KayitFormu> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _sifreController = TextEditingController();

  @override
  void dispose() {
    _emailController.dispose();
    _sifreController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'E-posta'),
            validator: (value) {
              if (value == null || !value.contains('@')) {
                return 'Geçerli bir e-posta girin';
              }
              return null;
            },
          ),
          TextFormField(
            controller: _sifreController,
            obscureText: true, // şifre gizleme
            decoration: InputDecoration(labelText: 'Şifre'),
            validator: (value) {
              if (value == null || value.length < 6) {
                return 'Şifre en az 6 karakter olmalı';
              }
              return null;
            },
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                print('E-posta: ${_emailController.text}');
                print('Şifre: ${_sifreController.text}');
              }
            },
            child: Text('Kayıt Ol'),
          ),
        ],
      ),
    );
  }
}

#🎯 Bu Dersten Çıkarılması Gerekenler

• TextField, serbest metin girişi sağlar ama girdiyi kendi başına saklamaz; TextEditingController, girdiye programatik erişim sağlar.
• Form + TextFormField, birden fazla alanı gruplandırıp birlikte doğrulamayı (validate) sağlar.
• GlobalKey<FormState>, widget ağacının dışından bir widget'ın State'ine doğrudan erişim sağlayan özel bir anahtardır (Dart'taki generics'in gerçek bir kullanımı).
• validator fonksiyonu, null (geçerli) veya bir String (hata mesajı) döndürür — Dart'ın null safety'sinin yaratıcı bir kullanımı.
• Controller'lar, Dart'ın garbage collector'ının otomatik temizleyemediği kaynaklar tuttuğu için dispose() ile elle serbest bırakılmalıdır.

#📝 Ödevler

• [ ] TextEditingController ile bir TextField'ın girdisini bir butona basınca print ile yazdır.
• [ ] E-posta ve şifre alanlı, Form + GlobalKey<FormState> kullanan bir giriş formu yaz, her iki alan için de validator ekle.
• [ ] Boş bir alan veya geçersiz bir e-posta ile "Gönder"e basmayı dene, hata mesajlarının nasıl göründüğünü gözlemle.
• [ ] obscureText: true kullanarak bir şifre alanı oluştur, görsel farkı gözlemle.
• [ ] Form geçerli olduğunda, tüm controller'lardaki değerleri print ile ekrana yazdıran bir "kayıt ol" akışı tamamla.

Sıradaki konu: Bölüm 4 — Konu 16: Theme Sistemi (ThemeData, ColorScheme)