Text fields allow users to type text into an app. They are used to build forms, send messages, create search experiences, and more. In this recipe, explore how to create and style text fields.
Flutter provides two Material Design text fields:
TextField and TextFormField.
TextField
TextField is the most commonly used text input widget.
By default, a TextField is decorated with an underline.
You can add a label, icon, inline hint text, and error text by supplying an
InputDecoration as the decoration
property of the TextField.
To remove the decoration entirely (including the
underline and the space reserved for the label),
set the decoration to null.
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),To retrieve the value when it changes, consult the Handle changes to a text field recipe.
TextFormField
TextFormField wraps a TextField and integrates it
with the enclosing Form.
This provides additional functionality,
such as validation and integration with other
FormField widgets.
TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),Interactive example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'Form Styling Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(title: const Text(appTitle)),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatelessWidget {
const MyCustomForm({super.key});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
),
],
);
}
}To learn more about input validation, consult the Build a form with validation recipe.