Flutter에서 텍스트 필드 포커스 관리하기: 효과적인 사용자 경험 만들기

Flutter에서 포커스를 관리하는 것은 텍스트 필드 간에 사용자 흐름을 자연스럽게 유지하고, 특정 시점에 입력을 유도하는 데 중요한 역할을 합니다. 이 글에서는 Flutter의 FocusNode와 autofocus 속성을 사용하여 포커스를 제어하는 방법과 주요 구현 방법을 다룹니다.

참고. Focus and text fields

Flutter 텍스트 필드 포커스란?

텍스트 필드에 포커스가 맞춰진다는 것은 해당 필드가 입력을 받을 준비가 되었다는 것을 의미합니다. 사용자가 폼에서 포커스를 시각적으로 전환할 수 있으며, 개발자는 프로그램적으로 포커스를 변경해 특정 필드에 집중할 수 있습니다. 예를 들어, 검색 화면이 로드되었을 때 검색 텍스트 필드에 자동으로 포커스를 맞추면 사용자가 추가로 필드를 클릭하지 않고 바로 입력을 시작할 수 있습니다.

1. 텍스트 필드에 자동으로 포커스 주기

autofocus 속성을 사용하여 화면이 나타나는 즉시 텍스트 필드에 포커스를 맞출 수 있습니다. 이 방법은 사용자가 별도의 터치 없이 바로 텍스트를 입력할 수 있게 해주며, 특히 검색이나 로그인 화면에서 유용합니다.

TextField(
  autofocus: true,
);

위 코드처럼 autofocus를 true로 설정하면 해당 텍스트 필드가 화면에 나타날 때 자동으로 포커스를 얻게 됩니다.

2. 버튼 클릭 시 특정 텍스트 필드에 포커스 주기

실제 앱에서는 특정 조건이 충족되었을 때나 버튼을 클릭할 때 텍스트 필드에 포커스를 맞추는 것이 필요할 수 있습니다. Flutter에서는 FocusNode를 사용하여 특정 필드에 프로그램적으로 포커스를 줄 수 있습니다.

단계 1: FocusNode 생성

먼저 FocusNode를 생성하여 포커스를 제어할 텍스트 필드를 지정합니다. FocusNode는 장기간 유지되어야 하는 객체이므로 StatefulWidget에서 관리하고, 생명주기 내에서 생성 및 삭제합니다.

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  late FocusNode myFocusNode;

  @override
  void initState() {
    super.initState();
    myFocusNode = FocusNode();
  }

  @override
  void dispose() {
    myFocusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 다음 단계에서 추가합니다.
  }
}

단계 2: FocusNode를 TextField에 전달하기

FocusNode가 준비되었으므로, 이를 TextField에 전달하여 해당 필드에 포커스를 줄 수 있도록 설정합니다.

@override
Widget build(BuildContext context) {
  return TextField(
    focusNode: myFocusNode,
  );
}

단계 3: 버튼을 눌러 특정 텍스트 필드에 포커스 주기

이제 FloatingActionButton이나 다른 버튼을 눌렀을 때 requestFocus() 메서드를 사용하여 텍스트 필드에 포커스를 맞출 수 있습니다.

FloatingActionButton(
  onPressed: () => myFocusNode.requestFocus(),
  child: Icon(Icons.edit),
);

위 코드는 버튼을 누를 때 myFocusNode가 연결된 텍스트 필드에 포커스를 맞추도록 합니다.

Flutter 포커스 관리의 장점

사용자가 빠르게 입력할 수 있는 환경 제공

포커스를 프로그램적으로 제어하면 사용자가 앱 내에서 원활하게 정보를 입력할 수 있습니다. 예를 들어, 검색 화면이 나타나자마자 검색어 입력을 위한 필드에 포커스를 맞추면 사용자는 즉시 검색어를 입력할 수 있습니다.

입력 오류 방지

폼을 작성할 때, 올바른 순서로 필드에 포커스를 맞추는 것은 중요한 UX 요소입니다. 특정 입력 필드에 포커스를 맞춰 사용자가 입력 순서에 혼동하지 않도록 유도할 수 있습니다.

다양한 입력 시나리오 구현 가능

포커스 관리는 단순히 사용자 입력을 받는 것뿐 아니라, API 호출이나 특정 조건 충족 후 입력 필드에 포커스를 자동으로 이동시키는 등 다양한 시나리오에 활용될 수 있습니다.

---

결론

Flutter의 FocusNode와 autofocus 속성을 사용해 포커스를 제어하는 것은 사용자 경험을 향상하는 데 중요한 요소입니다. 포커스를 효과적으로 관리하면 앱의 사용자 흐름을 개선하고, 중요한 순간에 사용자 주의를 텍스트 필드로 끌어올 수 있습니다.

 

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.
    );
  }
}