How to Add Placeholder or Hint on TextField in Flutter App

In this example, we are going to show you how to add placeholder or hint text on TextField or TextFormField in Flutter App. Addationally, we will show you how to style and set text direction. See the example below:

How to add Placeholder or Hint Text on TextFiled:

TextField(
  decoration: InputDecoration(
    hintText: ("Enter Your Name"), //hint text
    hintStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //hint text style
    hintMaxLines: 2, //hint text maximum lines
    hintTextDirection: TextDirection.rtl //hint text direction, current is RTL
  ),
)

How to add Placeholder or Hint Text on TextFormField:

TextFormField(
  decoration: InputDecoration(
    hintText: ("Enter Your Email"), //hint text
    hintStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //hint text style
    hintMaxLines: 2, //hint text maximum lines
    hintTextDirection: TextDirection.ltr //hint text direction, current is LTR
  ),
)

Full Code Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
        appBar: AppBar(
           title: Text("Placeholder or Hint on TextField"),
           backgroundColor: Colors.redAccent,
        ),
        body: Container(
          padding: EdgeInsets.all(20),
           child: Column(
             children:[
                Container(
                   child:TextField(
                       decoration: InputDecoration(
                          hintText: ("Enter Your Name"), //hint text
                          hintStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //hint text style
                          hintMaxLines: 2, //hint text maximum lines
                          hintTextDirection: TextDirection.rtl //hint text direction, current is RTL
                       ),
                   )
                ),

                Container(
                   child:TextFormField(
                       decoration: InputDecoration(
                          hintText: ("Enter Your Email"), //hint text
                          hintStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), //hint text style
                          hintMaxLines: 2, //hint text maximum lines
                          hintTextDirection: TextDirection.ltr //hint text direction, current is LTR
                       ),
                   )
                )
             ]
           )
        ),
     );
  }

}

Screenshot Output:

In this way, you can add placeholder or hint text on TextFiled and TextFormField widget in Flutter app.