Flutter: Form Widget ve Girdi Kontrolleri

Form, Flutter'da girdi kontrollerini gruplamak ve validasyon yapmak için kullanılan bir widget'tır. Form sayesinde birden fazla girdi alanını tek bir yapı altında yönetebilir ve toplu validasyon yapabiliriz.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Temel Kullanım

Form widget'ı bir GlobalKey ile yönetilir:

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Bu alan boş bırakılamaz';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Form geçerli, işlemi yap
          }
        },
        child: Text('Gönder'),
      ),
    ],
  ),
)

TextFormField Özellikleri

TextFormField(
  controller: _controller,
  decoration: InputDecoration(
    labelText: 'E-posta',
    hintText: '[email protected]',
    prefixIcon: Icon(Icons.email),
    suffixIcon: Icon(Icons.check),
    border: OutlineInputBorder(),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
  validator: (value) => value!.isEmpty ? 'Zorunlu alan' : null,
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
  obscureText: false, // Şifre için true
  maxLength: 50,
  maxLines: 1,
)

Validasyon Fonksiyonları

// E-posta validasyonu
String? validateEmail(String? value) {
  if (value == null || value.isEmpty) {
    return 'E-posta gerekli';
  }
  final regex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  if (!regex.hasMatch(value)) {
    return 'Geçersiz e-posta formatı';
  }
  return null;
}

// Şifre validasyonu
String? validatePassword(String? value) {
  if (value == null || value.length < 6) {
    return 'Şifre en az 6 karakter olmalı';
  }
  return null;
}

Form Metodları

Metod	Açıklama
validate()	Tüm alanları doğrular
save()	onSaved callback'lerini çağırır
reset()	Formu sıfırlar

AutovalidateMode

Form(
  key: _formKey,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  // AutovalidateMode.disabled - Manuel validasyon
  // AutovalidateMode.always - Her zaman validasyon
  // AutovalidateMode.onUserInteraction - Kullanıcı etkileşiminde
  child: ...
)

onSaved Kullanımı

String? _email;

TextFormField(
  onSaved: (value) {
    _email = value;
  },
)

// Form gönderildiğinde
if (_formKey.currentState!.validate()) {
  _formKey.currentState!.save(); // onSaved'ları çağırır
  print(_email);
}

Özet

• Form: Girdi alanlarını gruplar
• GlobalKey: Form durumunu yönetir
• TextFormField: Validasyonlu text input
• validator: Doğrulama fonksiyonu
• validate(): Tüm alanları kontrol eder

Form widget'ı, kullanıcı girdilerini yönetmek için vazgeçilmezdir.