Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022

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.

Outline

What is Flutter Textfield Decoration?
Flutter Textfield Decoration Implementation
Flutter Textfield Underline
Flutter Textfield Content Padding
Flutter Textfield Enabled
Flutter textfield Enabled Border
Flutter textfield Focused Border
Flutter Textfield Error Text
Flutter Textfield Error Style
Flutter Textfield Error Border
Flutter Textfield Filled and Fill Color
Flutter Textfield Helper Text
Flutter Textfield Hint Text
Flutter Textfield Label Text
Flutter Textfield Prefix Icon
Flutter Textfield Suffix Icon
Beautiful Flutter Textfield Source Code
Conclusion

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()
         )

As you can see in the above code that I have passed Flutter input decoration class to the decoration constructor of Flutter textfield. In the above image, this is the default style of the Flutter textfield. By using this input decoration class constructors, we can decorate Flutter textfield. Let’s understand Flutter textfield decoration by implementing constructors of input decoration class.

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

Using this line for , you can implement Flutter textfield underline remove .

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)

As you can see in the image above that by using Flutter textfield content padding, we now have some padding from the left as specified in the above code.

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

If you don’t want to take input from user then use the above code.

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))

As you can see in the above code, I have used the enabled border constructor of the input decoration class. I have passed outline input border class to the enabled border constructor and by using its border side and border radius constructor some decorations are implemented to the Flutter textfield enabled border which you can see in the above image.

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))

As you can see in the above code, I have used focused border constructor of the input decoration class. I have passed outline input border class to the focused border constructor and by using its border side and border radius constructor some decorations are implemented to the Flutter textfield enabled border which you can see in the above image.

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

But just using this line won’t change the Flutter textfield color. There’s one more step that you should follow to change the Flutter textfield color.

 filled: true

By using the filled constructor, it takes a boolean value so either make it true or false, by default it is false, which means the background color of Flutter textfield won’t change but making it true and also using the fill color which some specific color that you want will change the Flutter textfield color. So don’t forget to make the filled constructor set to true whenever you want to change the Flutter textfield background color.

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)

In the images above, you can see in the first one in which the textfield is not focused and the label text is working like a hint text but when I tapped on it it animates to the top left position.

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,
                  ),

As you can see in the image above, the icon you see in the left is called the Flutter textfield prefix icon.

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,
                  ),

As you can see in the image above, the icon you see in the right is called the Flutter textfield suffix icon.

Congrats for making it this far, I have tried to cover the main constructors of the Flutter textfield decoration, I encourage you to try the remaining ones and see what output you get from them. As a treat, I have prepared a beautiful Flutter textfield for you and I would love to see you use it in your Flutter apps. The source code is given in the next section.

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.

Flutter app articles you might like to read: beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions, flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development.