Özet - TextFormField
- Flutter kursu
- Başlangıç
- Ders 70/99
- 4 dk
TextFormField ve controller'ı birleştirerek giriş formu yaparsın.
Üç parçayı birleştir
Bir giriş formu yapmak için üç parçayı birleştirirsin: TextFormField widget'ı, TextEditingController (girdiyi yönetmek için) ve InputDecoration (etiket ve ipucu için). Controller, State içinde oluşturulup dispose edilir ve TextFormField'a bağlanır. Decoration da aynı alana verilir.
TextFormField(
controller: controller,
decoration: InputDecoration(
labelText: 'Ad',
),
)Uygulama Giriş formu yap
kayit adında bir fonksiyon yaz; çağrılınca Kayit yazdırsın. main içinde kayit'i çağır. KayitFormu adında bir StatefulWidget yaz; State içinde bir TextEditingController oluştur, dispose et ve bir TextFormField'a controller ve decoration olarak bağla. labelText 'Ad' olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
// kayit fonksiyonu yaz: "Kayit" yazdirsin
// KayitFormu adinda StatefulWidget yaz
// State icinde controller olustur ve dispose et
// TextFormField'a controller ve decoration bagla
void main() {
// kayit'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// KayitFormu'nu ekle
child: SizedBox(),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void kayit() {
print('Kayit');
}
void main() {
kayit();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: KayitFormu(),
),
),
);
}
}
class KayitFormu extends StatefulWidget {
const KayitFormu({super.key});
@override
State<KayitFormu> createState() => _KayitFormuState();
}
class _KayitFormuState extends State<KayitFormu> {
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return TextFormField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Ad',
),
);
}
}Beklenen çıktı
Kayit
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir giriş formu için hangi parçalar bir arada kullanılır?
- ListView + ListTile + Separator
- Column + Row + SizedBox
- Text + Padding + Center
- TextFormField + TextEditingController + InputDecoration Doğru cevap
Açıklama: Giriş formu için TextFormField (giriş widget'ı), TextEditingController (girdiyi denetleme) ve InputDecoration (etiket ve ipucu) birlikte kullanılır.
2 decoration parametresini ekle
TextFormField(
controller: myController,
____: InputDecoration(
labelText: 'Ad',
),
)TextFormField(
controller: myController,
decoration: InputDecoration(
labelText: 'Ad',
),
)Açıklama: InputDecoration'ı bağlamak için decoration parametresi kullanılır; style, theme veya label diye parametre yoktur.
3 Form özeti
| Kavram | Anlamı |
|---|---|
TextFormField |
Metin girişi widget'ı |
TextEditingController |
Girdiyi denetleyen sınıf |
InputDecoration |
Etiket ve ipucu sağlar |
dispose |
Controller'ı temizler |