In this article, I will be discussing Flutter textfield decoration in detail. What Flutter textfield decoration is? What is the purpose of using Flutter textfield decoration in a Flutter textfield and how to use it to customize Flutter textfield in Flutter app. I’ll be using a step by step approach to implement Flutter textfield decoration and demonstrate it using a proper example of Flutter textfield. Let’s not waste anymore of your precious time and start understanding and implementing Flutter textfield decoration.
What is Flutter Textfield Decoration?
The Textfield widget in Flutter is a very versatile control that can be used for a variety of purposes. One way to enhance its appearance and functionality is by using the Flutter textfield decoration class to add decorations to it. There are several different types of decorations available, each with its own set of properties that can be customized. I will be implementing the decoration to the Flutter textfield by using the constructors of Flutter textfield decoration. Let’s now leave the boring part and start implementing using code.
Flutter Textfield Decoration Implementation
Let’s start implementing Flutter textfield decoration. For that you have to use the decoration constructor of the Flutter textfield. See the below code:
TextField( decoration: InputDecoration() )

Flutter Textfield Underline
If you want to perform Flutter textfield underline remove. The line that you see under the Flutter textfield then you can do it using the border constructor of the input decoration class.
border: InputBorder.none
Flutter Textfield Content Padding
In Flutter textfield decoration, Flutter textfield content padding is the padding of the input text or hint text that is shown in the Flutter textfield. To implement it, you have to use the content padding constructor of the Flutter input decoration class.
contentPadding: EdgeInsets.only(left: 20)

Flutter Textfield Enabled
In Flutter textfield decoration, using the enabled constructor, you can choose whether to enable of disable the Flutter textfield, means whether to take input from user or not. By default, it is true, you can make it false and it will not respond to taps means it won’t be focused when the user taps on it and of course then user cannot input anything in it as well.
enabled: false
Flutter textfield Enabled Border
In Flutter textfield decoration, Flutter textfield enabled border specifies the border when the Flutter textfield is not focused, means when the user hasn’t tapped on it yet or in some other Flutter textfield. It disappears when the user taps on it or it is focused.
enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.blue, ), borderRadius: BorderRadius.circular(20))

Flutter textfield Focused Border
In Flutter textfield decoration, Flutter textfield focused border represents the border when the Flutter textfield is focused, means when the user has tapped on it or is focused. It disappears when focus is removed for that specific Flutter textfield.
focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.blue, ), borderRadius: BorderRadius.circular(20))

Flutter Textfield Error Text
In Flutter textfield decoration, Flutter textfield error text is show under and on the left side of the Flutter textfield. It is used when some wrong input is given to that specific Flutter textfield. It is implemented using the error text constructor of the Flutter textfield.
errorText: 'This is an error text',

If the error text is non null then the string passing to the error text constructor will be shown and it will also make the color of Flutter textfield border to red by default.
Flutter Textfield Error Style
In Flutter textfield decoration, Flutter textfield error style is used to style or decorate the error text. It is implemented using the error style constructor of Flutter input decoration class.
errorStyle: TextStyle(color: Colors.green)

I have passed error style the Flutter textstyle class and have given it a color of green just for demonstration. In the above image, you can see that the color of Flutter textfield error text is now green. But what about the color of the Flutter textfield border, how to customize that as well. Don’t worry, it is covered in the next section.
Flutter Textfield Error Border
In Flutter textfield decoration, Flutter textfield error border is used to customize the properties of the error border. It is implemented using the error border constructor of the Flutter input decoration class.
errorBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.red, ), borderRadius: BorderRadius.circular(20) )

I have passed outline input border class to the error border constructor and have given it a color by using the border side constructor of the outline input border class, also I have given it a border radius to make the edges of the Flutter textfield border rounded. In the above image, you can see that we have successfully implemented and customized Flutter textfield error border, you can change the color or other properties of the Flutter textfield error border depending on the requirements of your Flutter app.
Flutter Textfield Filled and Fill Color
In Flutter textfield decoration, Flutter textfield fill color is used to give color to the background of the Flutter textfield. It is implemented by using the fill color constructor.
fillColor: Colors.blue
filled: true

Flutter Textfield Helper Text
In Flutter textfield decoration, Flutter textfield helper text as the name suggests, it is used as a helper. It is implemented using the helper text constructor and decorated using the helper style constructor.
helperText: 'This is helper text', helperStyle: TextStyle(color: Colors.blue)

In the image above, this is how Flutter textfield helper text looks like in a Flutter textfield.
Flutter Textfield Hint Text
In Flutter textfield decoration, Flutter textfield hint text as the name suggests, it is used as a hint. It is shown when the textfield is empty and disappears when the user starts typing something. It is implemented using the hint text constructor and decorated using the hint style constructor.
hintText: 'This is hint text', hintStyle: TextStyle(color: Colors.grey.shade500)

In the image above, this is how Flutter textfield hint text looks like in a Flutter textfield.
Flutter Textfield Label Text
In Flutter textfield decoration, Flutter textfield label text is a bit similar to Flutter textfield hint text but unlike hint text, it doesn’t disappears when the user starts typing in that textfield but instead it moves to the top left of the text field when the user taps or start inputting. It is implemented using the label text and by using the label style, you can decorate that label text.
labelText: 'Label text', labelStyle: TextStyle(color: Colors.grey.shade500)


Flutter Textfield Prefix Icon
Flutter textfield prefix icon is the icon that is shown before the hint or input text, it is on the left side of the Flutter textfield. It is implemented using the prefix icon constructor of the input decoration class. In our case, we have passed it a person icon with grey color. Let’s implement it:
prefixIcon: Icon( Icons.person, color: Colors.grey, ),

Flutter Textfield Suffix Icon
Flutter textfield suffix icon is the icon that is shown after the hint or input text, it is on the right side of the Flutter textfield. It is implemented using the suffix icon constructor of the input decoration class. For demonstration, I have passed it an eye icon with grey color. Let’s implement it:
suffixIcon: Icon( Icons.visibility, color: Colors.grey, ),

Beautiful Flutter Textfield 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( style: TextStyle(color: Colors.white), decoration: InputDecoration( prefixIcon: Icon( Icons.person, color: Colors.white, ), suffixIcon: Icon( Icons.visibility, color: Colors.white, ), filled: true, fillColor: Colors.purple.withOpacity(.2), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.purple, width: 2), borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0))), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.purple, width: 2), borderRadius: BorderRadius.circular(100) .copyWith(bottomRight: Radius.circular(0))), labelText: 'Enter something...', labelStyle: TextStyle(color: Colors.grey.shade500), helperText: 'Enter username', helperStyle: TextStyle(color: Colors.grey.shade500)), ))), )); } }
Conclusion
In conclusion, we have now learned how to customize Flutter textfield decoration in Flutter app. I would love to have your feedback and encourage you to read my other articles on amazing Flutter widgets, beautiful Flutter templates, and amazing Flutter animations. That is it for this particular post. Thanks for reading.