How to add placeholder text to TextField or TextformField

Flutter we have two type of edit fields are there, one is TextField and other one is TextFormField. TextField widget is widely used for text input which can be created with a lot of style. Thanks to this tool, users will be able to write text in your app, for example, to fill out a form, use the search engine to carry out a specific search, messaging applications, among other options.

If you want to customize the text field so that the user has a better experience when browsing your application, what you should do is very simple, you only have to set the color of the text background in case you want to change it. Also, you will have the option to choose a contrast color for the cursor in very simple steps

TextFormField

Flutter offers the possibility of integrating two different text fields into an application where the user can write: on the one hand is the TextField and on the other, there is TextFormField. This last one is much broader in terms of its functions since it is part of the collection of information in the forms, among other functions.

Both the TextField and the TextFormField are usually used for specific functions, for example, if in the case of the TextFormField it is usually used when you want to integrate a form to your app and it is necessary to add different text fields. It is a very useful widget

Some times before user enter text into the field user has to know what data we have to write into that specific TextField, to do that we need to set placeholder text to that TextField widget. In this post we will show you how to add placeholder text to Textfield in flutter example. We can validate form field data with flutter form validation example

Let's get started

Step 1: Create android application

Step 2: Create a dart file with your required field widgets.

Step 3: To add placeholder text to textfiled we need to add like below

TextField(
  decoration: InputDecoration(
      border: InputBorder.none,
      hintText: 'Please enter a user name'
  ),
),

To add placeholder text to TextFormField we need to add like below

TextFormField(
  decoration: InputDecoration(
      hintText: "User Name"
  ),
  validator: (value) {
    if(value.isEmpty) {
      return 'Please enter valid user name';
    }
  },
),

Tags: How to add a placeholder text into TextField or TextFormField in Flutter

Conclusion: In this flutter example we covered what is Flutter Textfield and TextFormField and how to add place holder text to textfield