Text field

 Flutter provides two 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',
  ),
),

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',
  ),
),

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: <Widget>[

        const Padding(

          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),

          child: TextField(

            decoration: InputDecoration(

              border: OutlineInputBorder(),

              hintText: 'Enter a search term',

              labelText: 'Enter your username',

            ),

          ),

        ),

        Padding(

          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),

          child: TextFormField(

            decoration: const InputDecoration(

              border: OutlineInputBorder(),

              labelText: 'Enter your username',

            ),

          ),

        ),

      ],

    );

  }

}