[flutter] 플러터의 useFocusNode 훅(hook)을 사용한 포커스 제어

14 Dec 2023

flutter

플러터(Flutter)는 모바일 앱을 개발하기 위한 라이브러리로, 다양한 기능과 유용한 기능들을 포함하고 있습니다. 이 중에서 포커스를 제어하는 기능은 앱의 사용자 경험을 향상시키는 중요한 요소 중 하나입니다. useFocusNode 훅을 사용하여 플러터 앱에서 포커스를 관리하는 방법에 대해 알아보겠습니다.

useFocusNode 훅이란?

useFocusNode 훅은 플러터 프레임워크에서 제공하는 포커스 관리 훅입니다. 이 훅을 사용하면 앱 내에서 다양한 위젯들에 대한 포커스를 효과적으로 관리할 수 있습니다. 예를 들어, 텍스트 필드나 버튼 등에 포커스를 설정하거나 포커스 이동 및 제어하는 기능을 쉽게 구현할 수 있습니다.

useFocusNode 훅의 사용 예시

아래는 useFocusNode 훅을 사용하여 포커스를 제어하는 간단한 예시코드입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final focusNode = useFocusNode();

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Focus Control Example'),
        ),
        body: Center(
          child: TextField(
            focusNode: focusNode,
            decoration: InputDecoration(
              labelText: 'Enter your name',
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (focusNode.hasFocus) {
              focusNode.unfocus();
            } else {
              focusNode.requestFocus();
            }
          },
          child: Icon(Icons.edit),
        ),
      ),
    );
  }
}

위 코드에서는 useFocusNode 훅을 사용하여 focusNode를 생성하고, 이를 텍스트 필드의 포커스에 연결하였습니다. 또한 플로팅 액션 버튼을 통해 포커스 상태를 제어하는 기능을 구현하였습니다.

결론

useFocusNode 훅을 사용하면 플러터 앱에서 포커스를 효과적으로 관리할 수 있으며, 사용자와의 상호작용을 원활하게 만드는 데 도움을 줍니다. 이를 통해 앱의 사용자 경험을 개선하고, 더 나은 앱을 개발할 수 있습니다.