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.

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.