3 TextFormField PlaceHolder Examples In Flutter

In this post, you will learn how to make placeholder in TextFormField and TextField.

Okay.

Let’s set placeholder then.

Contents

1. Simple TextFormField PlaceHolder Example
2. HintText vs LabelText
3. Multiline TextFormField with PlaceHolder example
4. Rounded Border TextFormField with Hint Text example
5. Form Validation Example

If you don’t know how to setup Flutter and Create project, you can go to this link. There are some Flutter commands you must know. Go for it too.

Simple TextFormField PlaceHolder Example

Below code, we use decoration property inside TextFormField and TextField. You must provide value With InputDecoration
Inside InputDecoration, Use hintText to show hint.

         TextFormField(
            decoration: InputDecoration(hintText: 'TextFormField - Hint text'),
          ),


         TextField(
            decoration: InputDecoration(hintText: 'TextField - Hint Text'),
          ),

2. HintText vs LabelText

Most of the people didn’t know the difference between hintText and labelText in Flutter. Above GIF will easily help you to find out the difference.

labelText : it animates the label by default. When the input field(Here TextField) is empty, labelText shows on the top of input field. When it get focus, label moves above the top of input field.

hintText : as the name suggests it just shows a hint to the user and no animation.


TextField(
                decoration: InputDecoration(labelText: 'labelText'),
              ),
              TextField(
                decoration: InputDecoration(hintText: 'hintText'),
              ),
              TextField(
                decoration:
                    InputDecoration(hintText: 'both', labelText: 'both'),
              ),

3. Multiline TextFormField with PlaceHolder example

Sometimes, our app needs a multiline input for taking feedback and other detailed information. In this example, You will make a multiline TextFormField.

In this example, you will use TextFormField wrap With Expanded widget inside Column. That helps to expand the TextFormField inside the Column.
If expands:true, then you must set maxLines and minLines to null. Otherwise an error thrown.
expands:true makes TextField or TextFormField will expands to fill the parent(here Expanded).


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: TextFormField(
                expands: true,
                maxLines: null,
                minLines: null,
                decoration: InputDecoration(labelText: 'comment'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Rounded Border TextFormField with PlaceHolder example

Most of the apps are using rounded border TextFormField nowadays. In flutter it’s easy to make one like above.

Here you will use Container around TextFormField
Container used to make rounded corners and green background.
Flutter Padding Widget
Used BoxDecoration inside container to make circular rounded borders.


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('TextFormField PlaceHolder example'),
        body: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Container(
            padding: EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 20,
            ),
            decoration: BoxDecoration(
                color: Colors.green.shade300,
                borderRadius: BorderRadius.circular(36)),
            child: TextFormField(
              cursorColor: Colors.white,
              style: TextStyle(
                color: Colors.white,
              ),
              decoration: InputDecoration.collapsed(
                hintStyle: TextStyle(
                  color: Colors.white,
                ),
                hintText: 'Enter something',
              ),
            ),
          ),
        ),
      ),
    );
  }
}