How To Customize Flutter Textformfield Hint Text – Easy Flutter Guide

flutter textformfield hint text

In this tutorial, we’ll learn how to easily implement Flutter textformfield hint text by using a proper practical Flutter example code.

Introduction: Flutter Textformfield Hint Text

Flutter textformfield hint text is as the name suggests, it shows a hint to the user about the input that the user should input in that Flutter textfield. It is really a good practice to use Flutter textformfield hint text in a Flutter textformfield because the user can have a better idea of what he/she should input in that particular Flutter textfield.

Flutter textformfield hint text is visible when the Flutter textfield is empty and disappears when the user starts inputting and reappears when the Flutter textformfield is empty again. It is shown in the same place where the inputted text is shown in the Flutter textformfield. Let’s now understand it using a proper and easy Flutter example code.

Customize Flutter Textformfield Hint Text

By default, our Flutter textfield won’t show any hint text. So in order to customize and show hint text in Flutter textformfield, we have to use the decoration constructor of the Flutter textformfield. Passing the input decoration class and using the hint text constructor of the input decoration class. Using this hint text constructor, we can now specify our own hint text.

This hint text constructor only takes a string, means only a text can be inputted in it. Let’s now implement it using Flutter code. See the below code for this:

TextFormField(
        decoration: InputDecoration(
              hintText: 'This is hint text',
                    ),
                  )
flutter textformfield hint text
As you can see in the above code that I have used the hint text constructor and passed it a string. In the above image, you can see that the Flutter textformfield hint text is successfully implemented in our Flutter textformfield.
You can see the default color of Flutter textformfield hint text, if you want to know how to change the Flutter textformfield hint text color then click here.
Congrats, now you have a complete idea of how hint text works and how to change and customize Flutter textformfield hint text in Flutter textformfield.
I have prepared a beautiful Flutter textformfield design for you in which Flutter textformfield hint text is also implemented. Hope you will like it.
The complete source code for this custom Flutter textformfield is given in the below section.

Custom Flutter Textformfield Source Code

flutter textformfield hint text

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextFormField(
                    style: TextStyle(color: Colors.white),
                    cursorColor: Colors.green,
                    decoration: InputDecoration(
                        hintText: 'This is hint text',
                        hintStyle: TextStyle(color: Colors.white70),
                        prefixIcon: Icon(
                          Icons.person,
                          color: Colors.white70,
                        ),
                        border: InputBorder.none,
                        filled: true,
                        fillColor: Colors.green.withOpacity(.6),
                        contentPadding: EdgeInsets.all(26),
                        enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.transparent),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                topRight: Radius.circular(0),
                                bottomLeft: Radius.circular(0))),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.transparent),
                            borderRadius: BorderRadius.circular(30).copyWith(
                                topRight: Radius.circular(0),
                                bottomLeft: Radius.circular(0)))),
                  )
                ],
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textformfield hint text. I’ll be delighted to receive your feedback on this post.

I’d love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.