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'), )
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)), )
Custom Flutter Textformfield Design Source Code
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.
