Form widget'ı
- Flutter kursu
- Orta seviye
- Ders 31/99
- 4 dk
Form widget'ı ile birden çok alanı gruplamayı öğrenirsin.
Form widget'ı
Form widget'ı, birden çok form alanını gruplayan ve ortak bir doğrulama/kaydetme mekanizması sağlayan bir widget'tır. Form içine konan her TextFormField tek bir form bağlamında yönetilir.
Form(
key: _formKey,
child: Column(
children: [TextFormField(...)],
),
)Böylece tek bir yerden tüm alanları denetleyebilirsin.
key ve GlobalKey
Bir Form'a GlobalKey<FormState> tipinde bir key verirsin. Bu key üzerinden formun durumuna erişir, validate ve save metotlarını çağırırsın.
final _formKey = GlobalKey<FormState>();
Form(
key: _formKey,
child: ...,
)Key olmadan formun state'ine ulaşamazsın.
Uygulama Form ile alan grupla
Ekrani stateful widget'ında _formKey adında GlobalKey<FormState> tanımla. initState'te print('form ekranı') çağır. build'de bir Form ve içine bir TextFormField koy. Form'a _formKey'i bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Ekrani()));
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
// _formKey buraya tanımla
@override
void initState() {
super.initState();
print('form ekranı');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Form')),
body: Padding(
padding: EdgeInsets.all(16),
// Form ekle
child: Column(children: []),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Ekrani()));
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
final _formKey = GlobalKey<FormState>();
@override
void initState() {
super.initState();
print('form ekranı');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Form')),
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(labelText: 'İsim'),
),
],
),
),
),
);
}
}Beklenen çıktı
form ekranı
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Form widget'ının temel görevi nedir?
- Arka plan rengini ayarlamak
- Veritabanı işlemleri yapmak
- Birden çok form alanını gruplayıp ortak doğrulama sağlamak Doğru cevap
- Sayfa geçişlerini yönetmek
Açıklama: Form widget'ı birden çok form alanını tek bir bağlam altında toplar; böylece validate ve save işlemleri tek seferde yapılabilir.
2 Form'a GlobalKey tipini ver
final _formKey = GlobalKey<____>();
Form(key: _formKey, child: ...)final _formKey = GlobalKey<FormState>();
Form(key: _formKey, child: ...)Açıklama: Form widget'ının key'i GlobalKey<FormState> tipinde olmalıdır; bu, formun state'ine erişim sağlar.
3 Form parçaları
| Kavram | Anlamı |
|---|---|
Form |
Form alanlarını gruplayan widget |
GlobalKey<FormState> |
Form state'ine erişim sağlayan anahtar |
TextFormField |
Form içinde kullanılan alan widget'ı |
key |
Form'a state erişimi veren parametre |