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

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

Outline

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

Introduction: Flutter Textfield Error Text Weight

Flutter textfield error text is the text that is shown in the bottom left side of Flutter textfield underline/outline border.

Flutter textfield error text weight is the thickness of error text. Let’s first see its default font weight. After that, we’ll customize it practically.

Default Flutter Textfield Error Text Weight

For that, we’ve to use the decoration constructor of Flutter textfield widget and pass it input decoration. Then by using the error text constructor of input decoration, we can easily set error text.

For demonstration, we’ll pass a simple string as this constructor only accepts a string. Let’s now see what the default Flutter textfield error text weight is. See below code:

TextField(
         decoration: InputDecoration(
             errorText: 'Default Error Text Weight'
             )
              )

Change Flutter Textfield Error Text Weight

In order to do that, we’ve to use the error style constructor of input decoration widget. It accepts a text style widget so we’ll pass it a Flutter text style widget. This text style has a fontWeight constructor. It takes a FontWeight so for demonstration, we’ll pass it FontWeight.bold. See below code:

decoration: InputDecoration(          
   errorText: 'Custom Error Text Weight',
   errorStyle: TextStyle(fontWeight: FontWeight.bold)
)

We can see that the weight of error 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 textfield error text weight. Do give them a try.

So this is how we can easily give an error text a weight of our choice. Hope you like this post.

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

Custom Flutter Textfield Error 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(
                    errorText: 'Custom Error Text Weight',
                    errorStyle: TextStyle(fontWeight: w900)),
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed practical knowledge of how to customize Flutter textfield error 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.

You might also like:

How To Change Flutter Textfield Error Text Size [Detailed Flutter Guide]