In this tutorial, we’ll learn how to properly customize Flutter textfield hint text weight by using practical Flutter code examples.
Introduction: Flutter Textfield Hint Text Weight
It specifies the boldness/thickness of hint text of the Flutter textfield. Hint text in Flutter textfield is the text that can be used to show hint about what input should the user provide to the Flutter textfield. It is shown when the Flutter textfield is empty. Let’s now change the Flutter textfield hint text weight practically.
Default Flutter Textfield Hint Text Weight
For that we have to define a simple Flutter textfield. After that, we have to use the decoration constructor of Flutter textfield widget and then we’ve to pass input decoration class to that constructor. Finally, we’ve to make use of the hint text constructor and pass it some string. See the below code:
TextField( decoration: InputDecoration( hintText: 'This is the default hint text weight'), )
In the image above, we can see the default Flutter textfield hint text weight.
Change Flutter Textfield Hint Text Weight
For that we have to use the hint style constructor of input decoration class. Then we’ve to pass it Flutter text style widget. By using the font weight constructor of the text style widget, we can easily change the Flutter textfield hint text weight. It takes a FontWeight so for demonstration, we’ll pass it FontWeight.bold. See the below code:
TextField( decoration: InputDecoration( hintText: 'Custom weight of hint text', hintStyle: TextStyle(fontWeight: FontWeight.bold)), )
![How To Change Flutter Textfield Hint Text Weight [Easy Flutter Guide] 4 flutter textfield hint text font weight bold](https://letmeflutter.com/wp-content/uploads/2022/09/IMG_20220926_104830-300x88.jpg)
We can see that the weight of hint text is now set to bold. We can also set the text thickness using the below list.
FontWeight.bold FontWeight.w100 FontWeight.w200 FontWeight.w300 FontWeight.w400 FontWeight.w500 FontWeight.w600 FontWeight.w700 FontWeight.w800 FontWeight.w900
You can pass any of these font weight values to fontWeight constructor to get your required Flutter textformfield hint text weight. Do give them a try.
Custom Flutter Textfield Hint Text Weight 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: TextField( decoration: InputDecoration( hintText: 'Custom weight of hint text', hintStyle: TextStyle(fontWeight: FontWeight.w800)), ))), )); } }
Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textfield hint text weight. I’d love to have your feedback on this post.
I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.