How to Add Placeholder Text in Flutter Text Input

A placeholder text is a hint text which gives the user an idea about what to enter in the text input field. In this blog post, let’s see how to add placeholder text in Flutter text input.

As I mentioned in my previous Flutter text input tutorial, the TextField widget is used to create text inputs in Flutter. It has many useful properties. We can use hintText property of the InputDecoration widget to show placeholder text.

TextField(
          decoration: InputDecoration(
    hintText: 'Enter your name'
  ),)

Following is the complete example of TextField with placeholder text.

import 'package:flutter/material.dart';


class TextInputPlaceholderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Input Placeholder Example',
      home: MyInputPlaceholder(),
    );
  }
}

// Define a custom Form widget.
class MyInputPlaceholder extends StatefulWidget {
  @override
  _MyInputPlaceholderState createState() => _MyInputPlaceholderState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyInputPlaceholderState extends State<MyInputPlaceholder> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Input Placeholder Tutorial'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(child: TextField(
          decoration: InputDecoration(
    hintText: 'Enter your name'
  ),
          controller: myController,
        ),
      ),
      ),  
    );
  }
}

Following is the output of the Flutter TextField placeholder example.

Flutter placeholder text example

I hope this Flutter tutorial will help you. Thank you for reading!

Leave a Comment

Your email address will not be published. Required fields are marked *