decoration ve label
- Flutter kursu
- Başlangıç
- Ders 68/99
- 4 dk
InputDecoration ile etiket ve ipucu eklemeyi öğrenirsin.
InputDecoration
InputDecoration, bir TextFormField'ın görünümünü özelleştiren nesnedir. labelText parametresi alanın üstünde beliren bir etiket belirler; hintText parametresi ise alana girilmeden önce görünen ipucu metnidir. decoration parametresine bir InputDecoration verilir.
TextFormField(
decoration: InputDecoration(
labelText: 'Ad',
hintText: 'Adinizi girin',
),
)labelText ve hintText farkı
labelText, alan odaklandığında yukarı kayarak görünür kalır; kullanıcı yazmaya başlasa bile etiket görünmeye devam eder. hintText ise kullanıcı yazmaya başlayınca kaybolur. Bu yüzden labelText kalıcı bir etiket, hintText ise geçici bir ipucu olarak kullanılır.
Uygulama Etiketli TextFormField yap
etiketGoster adında bir fonksiyon yaz; çağrılınca Etiket yazdırsın. main içinde etiketGoster'i çağır. Bir TextFormField ekle; decoration ile labelText'i 'Ad' yap.
Başlangıç kodu
import 'package:flutter/material.dart';
// etiketGoster fonksiyonu yaz: "Etiket" yazdirsin
// TextFormField'a decoration ver
// labelText 'Ad' olsun
void main() {
// etiketGoster'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// TextFormField ekle
child: SizedBox(),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void etiketGoster() {
print('Etiket');
}
void main() {
etiketGoster();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Ad',
),
),
),
),
);
}
}Beklenen çıktı
Etiket
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 labelText ne işe yarar?
- Arka plan rengini ayarlar
- Alanın üstünde beliren etiket metnini belirler Doğru cevap
- Klavye türünü belirler
- Butonun köşe şeklini ayarlar
Açıklama: labelText alanın üstünde beliren etiket metnidir; arka plan rengi, klavye türü veya köşe şekli labelText ile alakalı değildir.
2 labelText parametresini ekle
TextFormField(
decoration: InputDecoration(
____: 'Ad',
),
)TextFormField(
decoration: InputDecoration(
labelText: 'Ad',
),
)Açıklama: Etiket metni labelText parametresi ile verilir; label, title veya name geçerli parametre adları değildir.
3 Decoration parçaları
| Kavram | Anlamı |
|---|---|
InputDecoration |
Decoration nesnesi |
labelText |
Üstteki etiket metni |
hintText |
İpucu metni |
decoration |
TextFormField'a verilen parametre |