Flutter TextField Decoration In Depth

In this post we will learn everything there is to learn about Flutter Textfield decoration.

Introduction

A TextField in Flutter is a basic input field that allows users to enter text. It is one of the most fundamental widgets in Flutter. Yet there is so much to do with it.

Create A TextField

For the purpose of this article, we will start with a basic Flutter app setup with nothing but a TextField.

import 'package:flutter/material.dart';

class MyTextFieldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "My Text Field",
        home: Scaffold(
          body: Padding(
            padding: EdgeInsets.symmetric(horizontal: 24.0),
            child: Center(
            child: TextField(),
          )),
        ));
  }
}

The code above will render a basic TextField in the Flutter app.

The basic TextField is nothing but a plain line. If you tap on the line, you will notice that a keyboard appears and the color of the line changes into an active color.

Customizing The Look And Feel Of TextField

In Flutter Material App, all of the customization for the TextField can be done via the InputDecoration property.

Customizing The Placeholder Text

First we will add a placeholder text on this TextField.

TextField(
              decoration: InputDecoration(
                hintText: "Enter Your Text...",
                hintStyle: TextStyle(
                  color: Colors.purple,
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),

We can use the hintText to show the placeholder text. The hintStyle property which is a TextStyle can be used to style the appearance like color, font style, font size etc. of the hint text.

How To Decorate Border Of TextField

There are different types of border properties that we can use to decorate the border of a TextField in Flutter. Namely:

• enabledBorder:
  • Decoration when text field is not in focus but is enabled
• disabledBorder:
  • Decoration when text field is disabled
• errorBorder:
  • Decoration to show during error
• focusedBorder:
  • Decoration when text field is in focus
• focusedErrorBorder:
  • Decoration when focused text field has error
• border:
  • Decoration based on the app’s ThemeData
  • Changing the decoration color via the border property of Textfield has no effect

We can use a combination of these properties to change the border color of TextField depending upon scenarios like on focus, on error, on disabled etc.

import 'package:flutter/material.dart';

class MyTextFieldApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData.dark(),
        title: "My Text Field",
        home: Scaffold(
          body: Padding(
              padding: EdgeInsets.symmetric(horizontal: 24.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                      decoration: InputDecoration(
                    enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.blueAccent,
                      ),
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    hintText: "Enabled decoration text ...",
                  )),
                  SizedBox(height: 10),
                  TextField(
                    decoration: InputDecoration(
                      disabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      hintText: "Disabled decoration text ...",
                    ),
                    enabled: false,
                  ),
                  SizedBox(height: 10),
                  TextField(
                    decoration: InputDecoration(
                        errorBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                            color: Colors.red,
                          ),
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        hintText: "Error decoration text ...",
                        errorText: "Ooops, something is not right!",
                        errorStyle: TextStyle(
                            color: Colors.red, fontWeight: FontWeight.bold)),
                  ),
                  SizedBox(height: 10),
                  TextField(
                    decoration: InputDecoration(
                      focusedBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.blue,
                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      hintText: "Focus decoration text ...",
                    ),
                  ),
                  SizedBox(height: 10),
                  TextField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.red,//this has no effect
                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      hintText: "Border decoration text ...",
                    ),
                  )
                ],
              )),
        ));
  }
}

How To Disable A TextField

We can easily disable a TextField by setting the enabled property of the InputDecoration to false.

TextField(
                    decoration: InputDecoration(
                      disabledBorder: OutlineInputBorder(
                        borderSide: BorderSide(
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      
                      hintText: "Disabled decoration text ...",
                    ),
                    enabled: false,
                  ),

How To Change The Background Color Of TextField

We can change the background color of the TextField via the filledColor and filled properties.

TextField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.blueAccent,
                      hintText: "Filled Color text...",
                    ),
                  )

Some More Flutter TextField Decoration

• Add a label for the TextField using the labelText and labelStyle properties.
• Create a character counter text using the counter, counterStyle and counterText properties.
• Add prefix or suffix texts via prefixText and suffixText.
• Use icons before (inside or outside) and outside the Textfield via icon, prefixIcon and suffixIcon properties.

Learn More About Flutter