decoration and label

Add labels and hints with InputDecoration.

InputDecoration

InputDecoration is the object that customizes the appearance of a TextFormField. The labelText parameter sets a label that appears above the field; the hintText parameter is a hint shown before the user types. An InputDecoration is passed to the decoration parameter.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Name',
    hintText: 'Enter your name',
  ),
)

Difference between labelText and hintText

labelText slides up when the field is focused and remains visible; even after the user starts typing, the label stays. hintText disappears once the user starts typing. Therefore labelText is used as a permanent label, while hintText is a temporary hint.

Exercise Make a labeled TextFormField

Write a function showLabel that prints Etiket. In main call showLabel. Add a TextFormField; with decoration set labelText to 'Ad'.

Show example solution

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

Test yourself

What does labelText do?
- Sets the background color
- Sets the label text appearing above the field
- Sets the keyboard type
- Sets the corner shape of the button
Show answer

Sets the label text appearing above the field — labelText is the label text appearing above the field; background color, keyboard type or corner shape are unrelated to labelText.

Add the labelText parameter

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

Show answer

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

Decoration parts

InputDecoration

Decoration object
labelText

Top label text
hintText

Hint text
decoration

Parameter given to TextFormField

Next lesson: obscureText

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies