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

Okay.

Let’s set placeholder then.


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

textformfield flutter placeholder

  • 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

hinttext vs labeltext flutter textfield
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

multiline textformfield flutter placeholder
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

custom textformfield flutter placeholder
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',
              ),
            ),
          ),
        ),
      ),
    );
  }
}


Form Validation Example

flutter login page with validation background image

I have previously talked about this, you can use this link for detailed information.

That’s all for now. If you like this post, please share it with your family and friends. If there is any doubt, please comment.

Please disable your adblocker or whitelist this site!