Meydan okuma 4
- Flutter kursu
- Başlangıç
- Ders 99/99
- 3 dk
Form ve TextFormField ile giriş doğrulama ekranı yaparsın.
Form ve TextFormField ile doğrulama
Bir giriş doğrulama ekranı yapmak için Form ve TextFormField kullanırsın. TextFormField'ın validator parametresi, girilen metni denetler ve hata varsa bir String döndürür. Hata yoksa null döndürülür. Form, altındaki tüm alanları gruplar ve toplu doğrulama yapmanı sağlar.
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
)Uygulama Basit form ekranı yap
formHazir adında bir fonksiyon yaz; çağrılınca Form hazir yazdırsın. FormEkrani adında bir StatelessWidget yaz; build metodunda bir Form ve içinde bir TextFormField olsun. TextFormField'ın validator'ı boş değer döndürdüğünde 'Bos birakilamaz' hatası verilsin. main içinde formHazir'ı çağır ve runApp ile başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// formHazir fonksiyonu yaz
// FormEkrani adinda StatelessWidget yaz
// Form ve TextFormField ekle, validator ile bos kontrolu yap
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
void formHazir() {
print('Form hazir');
}
class FormEkrani extends StatelessWidget {
const FormEkrani({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Form(
child: TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
),
),
),
),
);
}
}
void main() {
formHazir();
runApp(const FormEkrani());
}Beklenen çıktı
Form hazir
Uygulama Doğrulamalı giriş formu yap
dogrulamaBaslat adında bir fonksiyon yaz; çağrılınca Dogrulama basladi yazdırsın. DogrulamaEkrani adında bir StatefulWidget yaz; build metodunda bir Form ve içinde bir Column olsun. Column'da bir TextFormField (validator ile boş kontrolü) ve bir ElevatedButton bulunsun. main içinde dogrulamaBaslat'ı çağır ve runApp ile başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// dogrulamaBaslat fonksiyonu yaz
// DogrulamaEkrani adinda StatefulWidget yaz
// Form icinde Column: TextFormField (validator ile) ve ElevatedButton olsun
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
void dogrulamaBaslat() {
print('Dogrulama basladi');
}
class DogrulamaEkrani extends StatefulWidget {
const DogrulamaEkrani({super.key});
@override
State<DogrulamaEkrani> createState() => _DogrulamaEkraniState();
}
class _DogrulamaEkraniState extends State<DogrulamaEkrani> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Form(
child: Column(
children: [
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
),
ElevatedButton(
onPressed: () {},
child: Text('Gonder'),
),
],
),
),
),
),
);
}
}
void main() {
dogrulamaBaslat();
runApp(const DogrulamaEkrani());
}Beklenen çıktı
Dogrulama basladi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 validator fonksiyonu hata olmadığında ne döndürür?
- true
- false
- null Doğru cevap
- Bir hata mesajı
Açıklama: validator fonksiyonu hata olmadığında null döndürür; true, false veya hata mesajı döndürmez.
2 validator parametresini ekle
TextFormField(
____: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
)TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
)Açıklama: Girdiyi denetlemek için validator parametresi kullanılır; onChanged, onSaved veya onTap doğrulama amacıyla kullanılmaz.
3 Form parçaları
| Kavram | Anlamı |
|---|---|
Form |
TextFormField'ları gruplar |
TextFormField |
Metin giriş alanı |
validator |
Girdiyi denetleyen callback |
null |
Hata yok dönüş değeri |