In this tutorial, we’ll learn how to properly use and customize Flutter textfield error style by using practical Flutter code examples.
Introduction: Flutter Textfield Error Style
Flutter textfield error style, as the name suggests, it is the style of the error text in Flutter textfield. So in this post, we will see how we can change the style of Flutter textfield.
Default Flutter Textfield Error Style
To see the default error style, we have to define a simple Flutter textfield and pass input decoration class in its decoration constructor. Using the error text constructor of the Flutter textfield, we can see the default Flutter textfield error style. We have implemented it logically with the condition that when the user enters a blank space the it will show an error. See the below code:
String errorTextvalue = '';
TextField(
onChanged: (value) {
setState(() {
if (value.contains(' ')) {
errorTextvalue = value;
}
else {
errorTextvalue = '';
}
});
},
decoration: InputDecoration(
errorText:
errorTextvalue.isEmpty ? null : 'Don\'t use blank spaces',
),
)
Change Flutter Textfield Error Style
To change Flutter textfield error style, we have to use the error style constructor of the input decoration class. The error style constructor text style class which means we can change the error style’s color, font size and many more. For demonstration, I have customized color and font size of error text. See the below code:
errorStyle: TextStyle(color: Colors.purple, fontSize: 12))
Custom Flutter Textfield Design 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 StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
String errorTextvalue = '';
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: TextField(
onChanged: (value) {
setState(() {
if (value.contains(' ')) {
errorTextvalue = value;
} else {
errorTextvalue = '';
}
});
},
decoration: InputDecoration(
errorText: errorTextvalue.isEmpty
? null
: 'Don\'t use blank spaces',
errorStyle: TextStyle(color: Colors.purple, fontSize: 12)),
))),
));
}
}Conclusion
To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement and customize Flutter textfield error style. 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.
