TextFormField in Flutter

Introduction

TextFormField is a widget that allows you to enter text into an app. It makes easy to collect text input, validate and save that input.

Example 1: Basic TextFormField

In this example, you will learn to create a basic form field for text input.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
)

Example 2: TextFormField with Validation

In this example below, you will learn to implement validation to ensure the input is not empty.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your email',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your email';
    }
    return null;
  },
)

Example 3: Password Field

In this example below, you will learn to create a password field that hides the input.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Password',
  ),
  obscureText: true,
)

Example 4: Styled TextFormField

In this example below, you will learn to customize the appearance of your TextFormField.

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
    ),
    labelText: 'Enter your address',
  ),
)

Example 5: TextFormField with Prefix and Suffix Icons

In this example below, you will learn to create a TextFormField with prefix and suffix icons.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Phone Number',
    prefixIcon: Icon(Icons.phone),
    suffixIcon: Icon(Icons.check_circle),
  ),
)

Example 6: TextFormField with Max Length

In this example below, you will learn to create a TextFormField with a maximum length of 10 characters.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your address',
  ),
  maxLength: 10,
)

Example 7: TextFormField with Number Keyboard

In this example below, you will learn to create a TextFormField that opens the number keyboard on focus.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your age',
  ),
  keyboardType: TextInputType.number,
)

Example 8: TextFormField with Input Formatter

In this example below, you will learn to create a TextFormField with an input formatter that formats the input as a phone number. To achieve this, you will need to add the following import statement to your file:

import 'package:flutter/services.dart';

TextFormField(
  decoration: InputDecoration(
    labelText: 'Phone Number',
  ),
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    LengthLimitingTextInputFormatter(10),
  ],
)

Input Formatters are used to format the input as it is being entered. In above example, we use FilteringTextInputFormatter to allow only digits and LengthLimitingTextInputFormatter to limit the input to 10 characters.

Challenge

Create a TextFormField for user feedback that includes validation to ensure the input is at least 15 characters long. Style the field with a rounded border and include a prefix icon that represents communication.