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

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

Outline

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

Introduction: Flutter Textformfield Hint Text Weight

It specifies the boldness/thickness of 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 textformfield is empty. Let’s now change the Flutter textformfield hint text weight practically.

Default Flutter Textformfield Hint Text Weight

For that we have to define a simple Flutter textformfield. After that, we have to use the decoration constructor of Flutter textformfield 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:

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

In the image above, we can see the default Flutter textformfield hint text weight.

Change Flutter Textformfield 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 textformfield hint text weight. It takes a FontWeight so for demonstration, we’ll pass it FontWeight.bold. See the below code:

TextFormField(
            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: TextFormField(
                decoration: InputDecoration(
                    hintText: 'Custom weight of hint text',
                    hintStyle: TextStyle(fontWeight: FontWeight.w800)),
              ))),
    ));
  }
}