Özet - Form doğrulama
- Flutter kursu
- Orta seviye
- Ders 35/99
- 4 dk
Form, validator ve onSaved'ı birleştirerek giriş formu yaparsın.
Özet - Form doğrulama
Bu bölümde üç şey öğrendin: Form ile alanları gruplayıp GlobalKey<FormState> ile state'e erişirsin; validator ile alan geçerliliğini denetler ve hata mesajı gösterirsin; onSaved ile kaydetme sırasında alan değerlerini toplarsın.
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
print('isim: $_isim');
}Bunları birleştirerek giriş formu yaparsın.
Uygulama Giriş formu yap
Ekrani stateful widget'ında _formKey ve _eposta tanımla. Form içine bir TextFormField koy; validator boş değer için 'E-posta gerekli' döndürsün, onSaved ile _eposta'ya değeri atasın. Butona basıldığında validate başarılıysa save çağır ve print('eposta: $_eposta') yaz. main'de print('giriş formu') çağır.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
print('giriş formu');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
// _formKey ve _eposta ekle
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
children: [
// validator ve onSaved ile TextFormField ekle
TextFormField(),
ElevatedButton(
onPressed: () {
// validate ve save çağır
},
child: Text('Giriş'),
),
],
),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
print('giriş formu');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
final _formKey = GlobalKey<FormState>();
String? _eposta;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
validator: (deger) {
if (deger!.isEmpty) {
return 'E-posta gerekli';
}
return null;
},
onSaved: (deger) {
_eposta = deger;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
print('eposta: $_eposta');
}
},
child: Text('Giriş'),
),
],
),
),
),
);
}
}Beklenen çıktı
giriş formu
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Giriş formunda kullanıcı 'Giriş' butonuna bastığında ilk olarak ne yapılmalıdır?
- Uygulamayı kapat
- Form alanını temizle
- Hemen sayfa geçişi yap
- _formKey.currentState!.validate() ile formu doğrula Doğru cevap
Açıklama: Giriş butonuna basıldığında önce _formKey.currentState!.validate() ile form doğrulanır; başarılıysa save çağrılıp değerler toplanır.
2 Form key tipini tamamla
final _formKey = GlobalKey<____>();final _formKey = GlobalKey<FormState>();Açıklama: Form widget'ının key'i GlobalKey<FormState> tipinde olmalıdır; bu, validate ve save metotlarına erişim sağlar.
3 Form doğrulama parçaları
| Kavram | Anlamı |
|---|---|
Form |
Form alanlarını gruplayan widget |
validator |
Alan geçerliliğini denetleyen callback |
onSaved |
Kaydetme sırasında değer toplar |
validate |
FormState üzerinde çağrılan doğrulama metodu |