Flutter Text Field

7 min readAug 13, 2021

Introduction

A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard.By default, a text field has a decoration that draws a divider below the text field.

Properties of a Text Field

1. Decoration

decoration property is a text field property is used to control text field decoration.

Properties of Input Decoration

Add hint label to a text field

TextField(
decoration: InputDecoration(
  hintText: 'Enter password',),
),

Add border to a text field
The shape of the border to draw around the decoration’s container.

TextField(
 decoration: InputDecoration(
   hintText: 'Enter password',
   border: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(32.0)),)),
),

Enable border,
The border to display when the Input Decorator is enabled.

/// specify border color and width also set the border radius
TextField(
 decoration: InputDecoration(
   hintText: 'Enter password',
   border: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(32.0)),),
),
),

Content Padding
The padding for the input decoration’s container. Change the space between the text and the border. Horizontal (left to right)and vertical (up-down).

TextField(
decoration: InputDecoration(
 hintText: 'Enter password',
 border: OutlineInputBorder(
   borderRadius: BorderRadius.all(Radius.circular(32.0)),
   ),
 enabledBorder: OutlineInputBorder(
     borderSide:BorderSide(color: Colors.blueAccent, width: 1.0),
     borderRadius: BorderRadius.all(Radius.circular(32.0)),),
 contentPadding: EdgeInsets.symmetric(vertical: 30.0,horizontal:50.0),
),
),

Prefix Icon
An icon that appears before the prefix or prefixText and before the editable part of the text field, within the decoration’s container.

TextField(
    decoration: InputDecoration(
       hintText: 'Enter password',
       border: OutlineInputBorder(
         borderRadius: BorderRadius.all(Radius.circular(32.0)),
                        ),
       enabledBorder: OutlineInputBorder(
         borderSide:BorderSide(color: Colors.blueAccent,width: 1.0),
          borderRadius: BorderRadius.all(Radius.circular(32.0)),
                        ),
       contentPadding:EdgeInsets.symmetric(vertical:10.0, horizontal: 20.0),
       prefixIcon: Icon(Icons.lock)),
                  ),

Suffix
An icon that appears after the editable part of the text field and after the suffix or suffixText, within the decoration’s container.

TextField(
    decoration: InputDecoration(
       hintText: 'Enter password',
       border: OutlineInputBorder(
         borderRadius: BorderRadius.all(Radius.circular(32.0)),
       ),
       enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.blueAccent, width: 1.0),
          borderRadius: BorderRadius.all(Radius.circular(32.0)),
        ),
       contentPadding: EdgeInsets.symmetric(
            vertical: 10.0, horizontal: 20.0),
       prefixIcon: Icon(Icons.lock),
       suffixIcon: Icon(Icons.visibility_off),
   ),
 ),

Change background color of a text fields using decoration

fillColor: Colors.white,
filled: true,

Refactor a decoration property

if you have many text fields it is a good idea to reuse code which makes it easy to read your code and also makes the code base clean. First we will create a class to hold our style e.g style.dart

///style.dartimport 'package:flutter/material.dart';const textFieldDecoration = InputDecoration(
  hintText: 'Enter password',
  contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blueAccent, width: 1.0),
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
    borderRadius: BorderRadius.all(Radius.circular(10.0)),
  ),
);

use the style/InputDecoration in a text field

decoration: textFieldDecoration,

Edit an item in the decoration e.g if you want to edit the contents of hintText. copywith creates a copy but with the given fields replaced with the new values. It allows us to copy a T and pass in arguments that overwrite settable values

decoration: kTextFieldDecoration.copyWith(hintText: 'Enter your password.'),

learn more about decoration

bonus change the visibility of password in flutter

Initially password is obscure

bool _passwordVisible = true;

initialize our passwordVisible in the initState method.We generally override this method if we need to do some sort of initialization work like registering a listener. This sets the state of the visibility icon to false when the app loads.

@override
void initState() {
    super.initState();
    _passwordVisible = false;
}

use iterator to set the icon.

suffixIcon: IconButton(
  icon: Icon(
  // Based on passwordVisible state choose the icon
  _passwordVisible
      ? Icons.visibility
      : Icons.visibility_off,
  color: Theme.of(context).primaryColorDark,
  ),
  onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
  setState(() {
    _passwordVisible = !_passwordVisible;
  });
  },
),

preview

2. onChanged

Text field calls the onChanged callback whenever the user changes the text in the field. If the user indicates that they are done typing in the field (e.g., by pressing a button on the soft keyboard).

late String messageText;TextField(
  onChanged: (value) {
     messageText = value;
  },
),///in my case i was saving the data to firebase Cloud Firestore
TextButton(
  onPressed: () {
    //clear field after text is sent
     messageTextController.clear();    _fireStore.collection('message').add({
    'message': messageText,
 });
},
child: Text(
  'Send',
 ),
),

3. Controller

controller is used to control the text that is displayed in the text field.

///initialize
final textEditingController = TextEditingController();///Pass the controller to the text
TextField(
 controller: messageTextController,
 onChanged: (value) {
   messageText = value;  
 },
 decoration: kMessageTextFieldDecoration,
),

Clear textfield after submitting your details.

Clear the textfield on button pressed

TextButton(
 onPressed: () {
   messageTextController.clear();
 },
child: Text(
 'Send',
 style: kSendButtonTextStyle,),
),

Disposing the controller using the dispose method

Dispose method discards any resources used by the object.This method should only be called by the object’s owner.

late TextEditingController messageTextController;@override
  void initState() {
    super.initState();
    messageTextController = TextEditingController();
  }@override
  void dispose() {
    messageTextController.dispose();
    super.dispose();
  }//add the controller to the text field
TextField(
          controller: messageTextController,
}

4. Keyboard Type

Change keyboard properties, when your text field requires a user to enter data in a particular format e.g number, email. You need to make it easier for the number or other common symbols to be easily accessed by the user.

///keyboard will have numbers
TextField(
  keyboardType: TextInputType.number,
),

Other properties of TextInputType

TextInputType.datetime
.Optimize for date and time information
.On Android, requests a keyboard with ready access to the number keys, “:”, and “-”.
.On iOS, requests the default keyboard.

TextInputType.emailAddress
Optimize for email addresses
Requests a keyboard with ready access to the “@” and “.” keys.

TextInputType.multiline
Optimize for multiline textual information.
Requests the default platform keyboard, but accepts newlines when the enter key is pressed. This is the input type used for all multiline text fields.
TextInputType.name Optimized for a person’s name.
TextInputType.number
Optimize for unsigned numerical information without a decimal point.

TextInputType.url
Optimize for URLs.
Requests a keyboard with ready access to the “/” and “.” keys.

5.Obscure Text

Hide a password field. Hide the text being edited (e.g., for passwords) when set to true. Refer to the decoration property to see how to give the user the option of hiding and un-hiding a password.

TextField(
  obscureText: true,
),

6. Max Length

Limiting the length of a text field.The maximum number of characters (Unicode scalar values) to allow in the text field.

TextField(
  maxLength: 4,
),

7. Text Align

Displays how the text should be aligned horizontally.

/// Align the text in the center of the container.
textAlign: TextAlign.center,

// Align the text on the trailing edge of the container.
textAlign: TextAlign.end,

/// Stretch lines of text that end with a soft line break to fill the width of the container.
textAlign: TextAlign.justify,

/// Align the text on the leading edge of the container.
textAlign: TextAlign.start,

/// Align the text on the left edge of the container.
textAlign: TextAlign.left,

/// Align the text on the right edge of the container.
textAlign: TextAlign.right,

8. Text Align Vertical

How the text should be aligned vertically

/// Aligns a TextField's input Text with the bottom most location within a TextField
textAlignVertical: TextAlignVertical.bottom,

/// Aligns a TextField's input Text to the center of the TextField.
textAlignVertical: TextAlignVertical.center,

/// Aligns a TextField's input Text with the topmost location within a TextField's input box.
textAlignVertical: TextAlignVertical.top,

Text Field has so many properties which you can utilize in your application, here is a link to its flutter documentation. learn more on text field properties.

HAPPY CODING!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!