TextFormField in Flutter

Introduction

TextFormField lets users type text in your app. It helps collect information like names or emails.

When you want to ask users to enter their name or email.

When you need a form to collect user input like passwords or comments.

When you want to validate user input before saving it.

When you want to show hints or labels inside the text box.

When you want to control the keyboard type, like numbers or email.

Syntax

Flutter

TextFormField(
  controller: TextEditingController(),
  decoration: InputDecoration(
    labelText: 'Label',
    hintText: 'Hint',
  ),
  keyboardType: TextInputType.text,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
  },
  onSaved: (value) {
    // Save the value
  },
)

controller manages the text inside the field.

decoration adds labels and hints to guide users.

Examples

A simple text field with a label 'Name'.

Flutter

TextFormField(
  decoration: InputDecoration(labelText: 'Name'),
)

Text field optimized for email input with a label.

Flutter

TextFormField(
  keyboardType: TextInputType.emailAddress,
  decoration: InputDecoration(labelText: 'Email'),
)

Text field that hides input, used for passwords.

Flutter

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

Sample App

This app shows a form with a text field for the user to enter their name. When the user taps Submit, it checks if the field is empty. If not, it shows a greeting message with the entered name.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextFormField Example')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: MyCustomForm(),
        ),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Enter your name',
              hintText: 'John Doe',
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Hello, ${_controller.text}!')),
                );
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Important Notes

Always use a Form widget to group TextFormField widgets for validation.

Use TextEditingController to read or change the text programmatically.

Remember to dispose the controller in dispose() to avoid memory leaks.

Summary

TextFormField lets users type and edit text in your app.

Use decoration to add labels and hints for better user guidance.

Use validator inside a Form to check user input before saving.