decoration ve label

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.

Örnek çözümü göster

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',
            ),
          ),
        ),
      ),
    );
  }
}

Kendini test et

labelText ne işe yarar?
- Arka plan rengini ayarlar
- Alanın üstünde beliren etiket metnini belirler
- Klavye türünü belirler
- Butonun köşe şeklini ayarlar
Cevabı göster

Alanın üstünde beliren etiket metnini belirler — labelText alanın üstünde beliren etiket metnidir; arka plan rengi, klavye türü veya köşe şekli labelText ile alakalı değildir.

labelText parametresini ekle

TextFormField(
  decoration: InputDecoration(
    ____: 'Ad',
  ),
)

Cevabı göster

TextFormField(
  decoration: InputDecoration(
    labelText: 'Ad',
  ),
)

Decoration parçaları

InputDecoration

Decoration nesnesi
labelText

Üstteki etiket metni
hintText

İpucu metni
decoration

TextFormField'a verilen parametre

Sıradaki ders: obscureText

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler