•  


Focus and text fields | Flutter

Focus and text fields

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.

Focus a text field as soon as it's visible

#

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

dart
TextField
(

  autofocus: 
true
,

);

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

Focus a text field when a button is tapped

#

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 a FocusNode .
  2. Pass the FocusNode to a TextField .
  3. Give focus to the TextField when a button is tapped.

1. Create a FocusNode

#

First, create a FocusNode . Use the FocusNode to identify a specific TextField in Flutter's "focus tree." This allows you to give focus to the TextField in the next steps.

Since focus nodes are long-lived objects, manage the lifecycle using a State object. Use the following instructions to create a FocusNode instance inside the initState() method of a State class, and clean it up in the dispose() method:

dart
// 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) {

    // Fill this out in the next step.

  }

}

2. Pass the FocusNode to a TextField

#

Now that you have a FocusNode , pass it to a specific TextField in the build() method.

dart
@override

Widget
 build
(
BuildContext
 context) {

  return
 TextField
(

    focusNode: myFocusNode,

  );

}

3. Give focus to the TextField when a button is tapped

#

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

dart
FloatingActionButton
(

  // When the button is pressed,

  // give focus to the text field using myFocusNode.

  onPressed: () => myFocusNode.
requestFocus
(),

),

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) {
    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.
    );
  }
}
- "漢字路" 한글한자자동변환 서비스는 교육부 고전문헌국역지원사업의 지원으로 구축되었습니다.
- "漢字路" 한글한자자동변환 서비스는 전통문화연구회 "울산대학교한국어처리연구실 옥철영(IT융합전공)교수팀"에서 개발한 한글한자자동변환기를 바탕하여 지속적으로 공동 연구 개발하고 있는 서비스입니다.
- 현재 고유명사(인명, 지명등)을 비롯한 여러 변환오류가 있으며 이를 해결하고자 많은 연구 개발을 진행하고자 하고 있습니다. 이를 인지하시고 다른 곳에서 인용시 한자 변환 결과를 한번 더 검토하시고 사용해 주시기 바랍니다.
- 변환오류 및 건의,문의사항은 juntong@juntong.or.kr로 메일로 보내주시면 감사하겠습니다. .
Copyright ⓒ 2020 By '전통문화연구회(傳統文化硏究會)' All Rights reserved.
 한국   대만   중국   일본