How To Change Flutter Textfield Hint Text Weight [Easy Flutter Guide]

flutter textfield hint text weight

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'),
              )

flutter textfield hint text default 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)),
              )
flutter textfield hint text font weight bold

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.

The complete source code of custom Flutter textfield hint text weight is given in the next section.

Custom Flutter Textfield Hint Text Weight Source Code

flutter textfield hint text weight

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.

Leave a Comment

Your email address will not be published.