Customizing Flutter TextField

A TextField is a widget that allows users to input text to the app. By default, TextField is decorated with an underline. If we create the widget with no custom property.

TextField()

The widget looks like this:

Image of TextField widget with default properties

We can customize a label, icon, hint, and error text by supplying an InputDecoration as the decoration property of the field

Create and style a text field

Let’s explore the InputDecoration class

Add hint and label properties

Both hint and label give the user information on the field

Hint

Hint suggests what input the field accepts. Displayed only when the field is empty. Customizing the hint text by setting text to hintText property and style the text by hintStyle

TextField(
  decoration: InputDecoration(
    hintText: 'Hello Rabbit'
  ),
),

Image of TextField setting hintText property

TextField(
  decoration: InputDecoration(
    hintText: 'Hello Rabbit',
    hintStyle: TextStyle(
      color: Colors.amber,
      fontWeight: FontWeight.bold,                    
    ),
  ),
),

Image of TextField setting hintStyle property

By default, a hint is a single line and handle overflow by TextOverflow.ellipsis Customizing max line by setting a value to hintMaxLines

Image of TextField with long hintTex with default, single line

TextField(                
  decoration: InputDecoration(
    hintText: <<Long hintText>>,
    hintMaxLines: 2,
  ),
),

Image of TextField with long hintText by setting hintMaxLines to 2

Label

The label describes the input field. Customizing the label text by setting text to labelText property and style the text by labelStyle

TextField(                
  decoration: InputDecoration(
    labelText: 'Rabbit',
  ),
),

Unfocused state

Image of TextField setting labelText (unfocused)

focused state

Image fo TextField setting labelText (focused)

TextField(                
  decoration: InputDecoration(
    labelText: 'Rabbit',
    labelStyle: TextStyle(
      color: Colors.purple,
      fontWeight: FontWeight.bold,                    
    ),
  ),
),

Image of TextField setting labelStyle (focused)

Since the labelText property is String, if we want to elaborate more on the label, use label property which is Widget

TextField(                
  decoration: InputDecoration(
    label: RichText(
      text: const TextSpan(
        text: 'Enter',
        children: [
          TextSpan(
            text: ' number ',
            style: TextStyle(
              color: Colors.purple,
              fontWeight: FontWeight.bold,
            ),
          ),
          TextSpan(
            text: 'of rabbit',
          ),
        ],
      ),                  
    ),
  ),
),

Image of TextField setting RichText to label property

helperText, prefixText, and suffixText

helperText — persisting message providing a context of the input field. Customizing style by helperStyle .

TextField(                
  decoration: InputDecoration(
    helperText: 'Rabbit Helper!',
    helperStyle: TextStyle(color: Colors.lightGreen),
  ),              
),

prefixText —text prefix to place on the line before the input. Customizing style by prefixStyle use hintStyle if prefixStyle not provided.

TextField(                
  decoration: InputDecoration(
    prefixText: 'Rabbit Helper!',
    prefixStyle: TextStyle(color: Colors.lightGreen),
  ),              
),

suffixText — text suffix to place on the line after the input. Customizing style by suffixStyle use hintStyle if suffixStyle not provided.

TextField(                
  decoration: InputDecoration(
    suffixText: 'Rabbit Helper!',
    suffixStyle: TextStyle(color: Colors.lightGreen),
  ),              
),

Add a border to the text field

By default, the border is an underline.

No border

Use InputBorder.none to remove border

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: InputBorder.none,
  ),              
),

Outline border

Use OutlineInputBorder() to outline the field border which can set a border-radius to the class.

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: OutlineInputBorder(),
  ),              
),

Custom border-radius

Use borderRadius property in the OutlineInputBorder() class to customize the radius of the border. we can customize all corners or some.

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),              
),

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(12),
        bottomRight: Radius.circular(12)
      ),
    ),
  ),              
),

Different styles of the border by state

The border property is the default style. we can style the border by the state of the text field, by using focusedBorder, enabledBorder, disabledBorder, errorBorder, and focusedErrorBorder properties.

If you want to set border color you need to set the border style to enabledBorder . Set style to border property doesn’t work

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    border: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.amber, width: 4),
      borderRadius: BorderRadius.circular(12),                  
    ),
  ),              
),

But with enabledBorder , it does work

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    enabledBorder: OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.amber, width: 4),
      borderRadius: BorderRadius.circular(12),                  
    ),
  ),              
),

Add background color to the TextField

Use filColor property to set a background color for the field. But we need to set thefilled property to true. Otherwise, it doesn’t work.

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    fillColor: Colors.amber,
  ),              
),

TextField doesn’t use fillColor because by default filled property is false

Set filled to true

TextField(                
  decoration: InputDecoration(
    hintText: 'Enter rabbit number',
    filled: true,
    fillColor: Colors.amber,
  ),              
),

Combines Background color with Border

Backgroud color with customized border color and width

TextField(                
  decoration: InputDecoration(                            
    filled: true,
    fillColor: Colors.amberAccent,
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.deepOrange, width: 2),
    ),
  ),              
),

Background color with no border, but border-radius

TextField(                
  decoration: InputDecoration(                            
    filled: true,
    fillColor: Colors.amberAccent,
    border: OutlineInputBorder(     
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(24),
    ),
  ),              
),

Add icons to the text field

Icon

Using icon property to display an icon before the field, outside of the input text field.

TextField(                
  decoration: InputDecoration(                            
    icon: Icon(Icons.add_reaction_rounded),                
  ),              
),

Prefix Icon

Using prefixIcon property to display an icon that appears before the prefix and prefixText and before the editable part of the field. The size and color of the icon uses style from IconTheme

TextField(                
  decoration: InputDecoration(                            
    prefixIcon: Icon(Icons.add_reaction_rounded),                
  ),              
),

TextField(                
  decoration: InputDecoration(                       
    prefixText: 'Rabbit',
    prefixIcon: Icon(Icons.add_reaction_rounded),                
  ),              
),

Suffix Icon

Using suffixIcon property to display an icon that appears after the editable part of the field and after the suffix and suffixText. The size and color of the icon uses style from IconTheme

TextField(                
  decoration: InputDecoration(                       
    suffixIcon: Icon(Icons.add_reaction_rounded),                
  ),              
),

TextField(                
  decoration: InputDecoration(                       
    suffixText: 'Rabbit',
    suffixIcon: Icon(Icons.add_reaction_rounded),                
  ),              
),

The next article is to customize TextField from the design shot on Dribble.

Customizing TextField from design shots on Dribble