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

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

Outline

1. Introduction: Flutter Textformfield Error Text Size
2. Default Flutter Textformfield Error Text Size
3. Change Flutter Textformfield Error Text Size (Multiple Examples)
4. Custom Flutter Textformfield Error Text Size Source Code
5. Conclusion

Introduction: Flutter Textformfield Error Text Size

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

It is shown whenever a wrong input(implemented through proper logic) is given to the Flutter textformfield.

For instance, if the user input some blank space inside the email textformfield then we can show a Flutter textformfield error text. If you want to learn how to create this logic in Flutter textfield then click here. It will be same for textformfield as well.

In this post, we’ll see how to easily change Flutter textformfield error text size. So let’s get right into it.

Default Flutter Textformfield Error Text Size

For that, we’ve to use the decoration constructor of Flutter textformfield 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 textformfield error text size is. See below code:

TextFormField(
         decoration: InputDecoration(
             errorText: 'Default Error Text Size'
             )
              )

Change Flutter Textformfield Error Text Size (Multiple Examples)

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 fontSize constructor. It accepts a double(decimal) value but passing it an integer value will also work just fine. So for demonstration, we’ll pass some values to it. See below code examples:

Example 1

decoration: InputDecoration(
                  errorText: 'Custom Error Text Size',
                  errorStyle: TextStyle(fontSize: 10))

decoration: InputDecoration(
                  errorText: 'Custom Error Text Size',
                  errorStyle: TextStyle(fontSize: 18))

In the above examples, we can see that Flutter textformfield error text size is customized.

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

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

Custom Flutter Textformfield Error Text Size 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: TextFormField(
                decoration: InputDecoration(
                    errorText: 'Custom Error Text Size',
                    errorStyle: TextStyle(fontSize: 18)),
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed practical knowledge of how to customize Flutter textformfield error text size. 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 Textformfield Error Text Color [Detailed Flutter Guide]