When a text field is selected and accepting input, it is said to have "focus." Generally, users shift focus to a text field by tapping, and developers shift focus to a text field programmatically by using the tools described in this recipe.

Managing focus is a fundamental tool for creating forms with an intuitive flow. For example, say you have a search screen with a text field. When the user navigates to the search screen, you can set the focus to the text field for the search term. This allows the user to start typing as soon as the screen is visible, without needing to manually tap the text field.

In this recipe, learn how to give the focus to a text field as soon as it's visible, as well as how to give focus to a text field when a button is tapped.

To give focus to a text field as soon as it's visible, use theautofocus property.

TextField(autofocus:true,);

For more information on handling input and creating text fields, see theForms section of the cookbook.

Rather than immediately shifting focus to a specific text field, you might need to give focus to a text field at a later point in time. In the real world, you might also need to give focus to a specific text field in response to an API call or a validation error. In this example, give focus to a text field after the user presses a button using the following steps:

1. Create aFocusNode.
2. Pass theFocusNode to aTextField.
3. Give focus to theTextField when a button is tapped.

First, create aFocusNode. Use theFocusNode to identify a specificTextField in Flutter's "focus tree." This allows you to give focus to theTextField in the next steps.

Since focus nodes are long-lived objects, manage the lifecycle using aState object. Use the following instructions to create aFocusNode instance inside theinitState() method of aState class, and clean it up in thedispose() method:

// Define a custom Form widget.classMyCustomFormextendsStatefulWidget{constMyCustomForm({super.key});​@overrideState<MyCustomForm>createState()=>_MyCustomFormState();}​// Define a corresponding State class.// This class holds data related to the form.class_MyCustomFormStateextendsState<MyCustomForm>{// Define the focus node. To manage the lifecycle, create the FocusNode in// the initState method, and clean it up in the dispose method.lateFocusNodemyFocusNode;​@overridevoidinitState(){super.initState();​myFocusNode=FocusNode();}​@overridevoiddispose(){// Clean up the focus node when the Form is disposed.myFocusNode.dispose();​super.dispose();}​@overrideWidgetbuild(BuildContextcontext){// Fill this out in the next step.}}

Now that you have aFocusNode, pass it to a specificTextField in thebuild() method.

@overrideWidgetbuild(BuildContextcontext){returnTextField(focusNode:myFocusNode);}

Finally, focus the text field when the user taps a floating action button. Use therequestFocus() method to perform this task.

FloatingActionButton(// When the button is pressed,// give focus to the text field using myFocusNode.onPressed:()=>myFocusNode.requestFocus(),),

import 'package:flutter/material.dart';void main() => runApp(const MyApp());class MyApp extends StatelessWidget {  const MyApp({super.key});  @override  Widget build(BuildContext context) {    return const MaterialApp(title: 'Text Field Focus', home: MyCustomForm());  }}// Define a custom Form widget.class MyCustomForm extends StatefulWidget {  const MyCustomForm({super.key});  @override  State<MyCustomForm> createState() => _MyCustomFormState();}// Define a corresponding State class.// This class holds data related to the form.class _MyCustomFormState extends State<MyCustomForm> {  // Define the focus node. To manage the lifecycle, create the FocusNode in  // the initState method, and clean it up in the dispose method.  late FocusNode myFocusNode;  @override  void initState() {    super.initState();    myFocusNode = FocusNode();  }  @override  void dispose() {    // Clean up the focus node when the Form is disposed.    myFocusNode.dispose();    super.dispose();  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: const Text('Text Field Focus')),      body: Padding(        padding: const EdgeInsets.all(16),        child: Column(          children: [            // The first text field is focused on as soon as the app starts.            const TextField(autofocus: true),            // The second text field is focused on when a user taps the            // FloatingActionButton.            TextField(focusNode: myFocusNode),          ],        ),      ),      floatingActionButton: FloatingActionButton(        // When the button is pressed,        // give focus to the text field using myFocusNode.        onPressed: () => myFocusNode.requestFocus(),        tooltip: 'Focus Second Text Field',        child: const Icon(Icons.edit),      ), // This trailing comma makes auto-formatting nicer for build methods.    );  }}