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

In this tutorial, we’ll learn how to properly customize Flutter textfield hint text weight by using practical Flutter code examples.

Outline

1. Introduction: Flutter Textfield Hint Text Weight?
2. Default Flutter Textfield Hint Text Weight
3. Change Flutter Textfield Hint Text Weight
4. Custom Flutter Textfield Hint Text Weight Source Code
5. Conclusion

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

FontWeight.bold
FontWeight.w100
FontWeight.w200
FontWeight.w300
FontWeight.w400
FontWeight.w500
FontWeight.w600
FontWeight.w700
FontWeight.w800
FontWeight.w900

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)),
              ))),
    ));
  }
}