How To Change Flutter Textformfield Hint Text Size?

flutter textformfield hint text size

Flutter textformfield hint text size customization. In this article, I will be implementing Flutter textformfield hint text size customization using proper and easy Flutter code example. I will be implementing it using step by step explanation so it will be easy for you to understand how to change Flutter textformfield hint text size in Flutter textformfield. So without wasting anymore time, let’s get right into changing Flutter textformfield hint text size.

What is Flutter Textformfield Hint Text Size?

Flutter textformfield hint text size is as the name suggests, the size of the hint text of the Flutter textformfield. Hint text in Flutter textformfield is the text that can be used to show hint about what input should the user provide to the Flutter textformfield. It is shown when the Flutter textformfield is empty. Let’s now change the Flutter textformfield hint text size.

Default Flutter Textformfield Hint Text Size

Let’s see the default hint size of the Flutter textformfield. For that we have to define a simple Flutter textformfield. So for that we have to use the decoration constructor of the Flutter textformfield and then passing input decoration class to that constructor. Then using the hint text constructor and passing it a string. See the below code:

TextFormField(
           decoration: InputDecoration(
                hintText: 'This is the default size of hint text'),
              )

flutter textformfield default hint size

In the image above, you can see that it shows the default Flutter textformfield hint text size. Now let’s change the font size of the Flutter textformfield hint text.

Change Flutter Textformfield Hint Text Size

Let’s now change Flutter textformfield hint text size. For that we have to use the hint style constructor of the input decoration class. Then pass it text style class, using the font size constructor of the text style class, we can change the Flutter textformfield hint text size. See the below code:

TextFormField(
            decoration: InputDecoration(
                    hintText: 'This is the custom size of hint text',
                    hintStyle: TextStyle(fontSize: 20)),
              )
flutter textformfield hint text size
You can see in the above image that I have changed the size of hint text just to demonstrate that the customization of Flutter textformfield hint text size is working properly.
Congrats, hope you now have a complete practical knowledge of how to change Flutter textformfield hint text size in Flutter textformfield. I would love to hear your thought on it in comment section. Now as a treat, I have designed a beautiful custom Flutter textformfield design for you in which Flutter textformfield hint text size is also customized. The complete source code is given in the next section.

Custom Flutter Textformfield Design Source Code

flutter textformfield hint text size

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 StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: TextFormField(
                  style: TextStyle(color: Colors.white, fontSize: 20),
                  cursorColor: Colors.purple,
                  decoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.purple.withOpacity(.4),
                    hintText: 'Custom hint text size',
                    hintStyle: TextStyle(color: Colors.white, fontSize: 20),
                    prefixIcon: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    border: InputBorder.none,
                    enabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.purple),
                        borderRadius: BorderRadius.circular(30).copyWith(
                            topRight: Radius.circular(0),
                            topLeft: Radius.circular(0))),
                    focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(color: Colors.purple),
                        borderRadius: BorderRadius.circular(30).copyWith(
                            topRight: Radius.circular(0),
                            topLeft: Radius.circular(0))),
                    contentPadding: EdgeInsets.all(23),
                  )))),
    ));
  }
}

Conclusion

In conclusion, hope you now have complete understanding of how to change Flutter textformfield hint text size in Flutter textformfield. I would love to hear your thoughts on this post in the comment section and would encourage you to visit my other articles on Flutter app development, Flutter widgets, Flutter animations, Flutter amazing templates and many others more, links to some of them are listed below. Thank you for reading.

Leave a Comment

Your email address will not be published.