Flutter TextField Widget: A Comprehensive Guide

The TextField widget is a cornerstone of user input in Flutter applications. Whether you're building a login screen, a chat application, or a search bar, the TextField provides a flexible and feature-rich way to capture user data.

What is a TextField in Flutter?

In Flutter, TextField is a widget that allows users to input text. It is one of the most commonly used widgets for form fields, chat input, or search functionality.

Example Use Case:

• A login form to capture the username and password.

• A search bar in an e-commerce app.

• A chat input field in a messaging app.

Basic TextField Usage

To use a TextField, simply include it in your widget tree. Here's a minimal example:

TextField(
            decoration: InputDecoration(
              labelText: 'Enter your name',
              hintText: 'John Doe',
              border: OutlineInputBorder(),
            ),
          ),

Explanation

• labelText: Adds a label above the input field.

• hintText: Displays placeholder text inside the input field.

• border: Adds a border around the field.

Properties of TextField

1. controller

• Type: TextEditingController

• Purpose: Manages the text inputted in the field. Use it to read, set, or clear the field's content programmatically.
  Example:

•   final TextEditingController _controller = TextEditingController();
  
    TextField(
      controller: _controller,
    );
  

  2. focusNode

  • Type: FocusNode

  • Purpose: Manages focus for the TextField. Use it to check focus status or move focus between fields.

  • Example:

  •   final FocusNode _focusNode = FocusNode();
    
      TextField(
        focusNode: _focusNode,
      );
    

3. keyboardType

• Type: TextInputType

• Purpose: Specifies the type of keyboard to show (e.g., email, number, phone).

• Values:

  • TextInputType.text (default)

  • TextInputType.number

  • TextInputType.emailAddress

  • TextInputType.phone

  • TextInputType.multiline

• Example:

•   TextField(
      keyboardType: TextInputType.emailAddress,
    );
  

4. textInputAction

• Type: TextInputAction

• Purpose: Specifies the action button on the keyboard (e.g., "Done", "Search", "Next").

• Values:

  • TextInputAction.done

  • TextInputAction.next

  • TextInputAction.search

        TextField(
          textInputAction: TextInputAction.next,
        );

5. decoration

• Type: InputDecoration

• Purpose: Customizes the appearance of the TextField.

• Common Sub-Properties:

  • labelText: Adds a label above the field.

  • hintText: Adds placeholder text inside the field.

  • prefixIcon / suffixIcon: Adds an icon before/after the field.

  • border: Defines the field's border.

• Example:

•   TextField(
      decoration: InputDecoration(
        labelText: 'Email',
        hintText: 'Enter your email',
        prefixIcon: Icon(Icons.email),
        border: OutlineInputBorder(),
      ),
    );
  

6. style

• Type: TextStyle

• Purpose: Defines the text's appearance (color, font size, weight, etc.).

• Example:

•   TextField(
      style: TextStyle(
        color: Colors.blue,
        fontSize: 18,
      ),
    );
  

7. textAlign

• Type: TextAlign

• Purpose: Aligns the text horizontally in the field.

• Values:

  • TextAlign.left (default)

  • TextAlign.center

  • TextAlign.right

• Example:

•   TextField(
      textAlign: TextAlign.center,
    );
  

8. textAlignVertical

• Type: TextAlignVertical

• Purpose: Aligns the text vertically in the field.

• Example:

    TextField(
      textAlignVertical: TextAlignVertical.center,
    );
  

9. obscureText

• Type: bool

• Purpose: Masks the input text (useful for passwords).

• Default Value: false

• Example:

    TextField(
      obscureText: true,
    );
  

10. maxLines

• Type: int

• Purpose: Sets the maximum number of lines for the text.

• Default Value: 1

• Example

•   TextField(
      maxLines: 3,
    );
  

11. minLines

• Type: int

• Purpose: Sets the minimum number of lines for the text.

• Example:

•   TextField(
      minLines: 2,
    );
  

12. maxLength

• Type: int

• Purpose: Limits the number of characters in the field.

• Example:

•   TextField(
      maxLength: 50,
    );
  

13. readOnly

• Type: bool

• Purpose: Makes the field non-editable.

• Default Value: false

• Example:

•   TextField(
      readOnly: true,
    );
  

14. enabled

• Type: bool

• Purpose: Enables or disables the TextField.

• Default Value: true

• Example:

•   TextField(
      enabled: false,
    );
  

15. cursorColor

• Type: Color

• Purpose: Sets the color of the cursor.

• Example:

•   TextField(
      cursorColor: Colors.red,
    );
  

16. cursorWidth

• Type: double

• Purpose: Sets the thickness of the cursor.

• Default Value: 2.0

• Example:

•   TextField(
      cursorWidth: 3.0,
    );
  

17. onChanged

• Type: ValueChanged<String>

• Purpose: Called when the user changes the text.

• Example:

•   TextField(
      onChanged: (value) {
        print('Text changed: $value');
      },
    );
  

18. onSubmitted

• Type: ValueChanged<String>

• Purpose: Called when the user submits the field (e.g., presses "Done").

• Example:

•   TextField(
      onSubmitted: (value) {
        print('Text submitted: $value');
      },
    );
  

19. autofocus

• Type: bool

• Purpose: Automatically focuses the field when the screen is displayed.

• Default Value: false

• Example:

•   TextField(
      autofocus: true,
    );
  

20. autocorrect

• Type: bool

• Purpose: Enables/disables the auto-correction feature.

• Default Value: true

• Example:

•   TextField(
      autocorrect: false,
    );
  

21. enableSuggestions

• Type: bool

• Purpose: Enables/disables suggestions (useful for password fields).

• Default Value: true

• Example:

•   TextField(
      enableSuggestions: false,
    );
  

22. scrollPadding

• Type: EdgeInsets

• Purpose: Sets padding when the field is scrolled into view.

• Default Value: EdgeInsets.all(20.0)

• Example:

•   TextField(
      scrollPadding: EdgeInsets.all(50.0),
    );
  

23. toolbarOptions

• Type: ToolbarOptions

• Purpose: Configures the options available in the text selection toolbar.

• Example:

•   TextField(
      toolbarOptions: ToolbarOptions(
        copy: true,
        paste: true,
      ),
    );
  

24. showCursor

• Type: bool

• Purpose: Shows/hides the cursor.

• Default Value: true

• Example:

•   TextField(
      showCursor: false,
    );
  

25. inputFormatters

• Type: List<TextInputFormatter>

• Purpose: Applies formatting rules (e.g., restricting input).

• Example:

    TextField(
      inputFormatters: [
        FilteringTextInputFormatter.digitsOnly,
      ],
    );
  

By leveraging these properties effectively, you can fully customize the behavior and appearance of a TextField in Flutter to meet your application's requirements.

• Happy Coding!! 🙂