[flutter] 플러터 Riverpod에서의 키보드 입력 처리 방법

30 Nov 2023

flutter

플러터(Flutter) 프레임워크는 사용자 인터페이스(UI) 개발을 위한 강력한 도구입니다. Riverpod 패키지는 플러터 앱의 상태 관리를 쉽게 해주는 라이브러리입니다. 이번 포스트에서는 Riverpod를 사용하여 키보드 입력을 처리하는 방법에 대해 알아보겠습니다.

1. Riverpod 패키지 추가하기

플러터 프로젝트에 Riverpod 패키지를 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같이 추가해주세요:

dependencies:
  riverpod: ^1.0.0

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받고 프로젝트에 적용해주세요.

2. 키보드 입력 상태 관리하기

Riverpod를 사용하여 키보드 입력을 관리하기 위해, provider 패키지를 사용할 수 있습니다. provider 패키지는 Riverpod의 공식적인 상태 관리 패턴을 구현합니다. 먼저 다음과 같이 provider를 import 해주세요:

import 'package:flutter_riverpod/flutter_riverpod.dart';

그런 다음, 키보드 입력 상태를 관리하기 위한 provider를 생성합니다:

final keyboardProvider = StateProvider((ref) => '');

위 코드는 초기 값으로 빈 문자열을 가지는 상태를 생성합니다. 키보드 입력이 변경될 때마다 해당 상태가 업데이트됩니다.

3. 키보드 입력 이벤트 처리하기

이제 키보드 입력에 대한 이벤트를 처리할 준비가 되었습니다. provider의 StateProvider에서 제공하는 ref.watch를 사용하여 키보드 입력 상태를 감시하고, 변화가 있을 때마다 적절한 동작을 수행할 수 있습니다.

예를 들어, 다음과 같이 키보드 입력이 변경될 때마다 해당 값을 출력하는 위젯을 생성할 수 있습니다:

class KeyboardInputWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final keyboardState = context.read(keyboardProvider);

    return Consumer(
      builder: (context, watch, _) {
        final currentInput = watch(keyboardState).state;
        return Text(currentInput);
      },
    );
  }
}

위 코드에서 Consumer 위젯은 keyboardProvider의 상태 변화를 감시하고, 해당 상태를 Text 위젯의 텍스트로 표시합니다.

4. 키보드 입력 처리하기

키보드 입력 처리를 위해 RawKeyboardListener 위젯을 사용할 수 있습니다. 다음과 같이 RawKeyboardListener 위젯을 사용하여 키보드 이벤트를 처리하는 위젯을 생성해보세요:

class KeyboardListenerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final keyboardState = context.read(keyboardProvider);

    return RawKeyboardListener(
      focusNode: FocusNode(),
      onKey: (event) {
        final currentInput = keyboardState.state;
        if (event is RawKeyUpEvent) {
          final key = event.logicalKey;
          if (key.keyLabel.isNotEmpty) {
            keyboardState.state = currentInput + key.keyLabel;
          }
        }
      },
      child: Container(),
    );
  }
}

위 코드에서 RawKeyboardListener 위젯은 키보드 이벤트를 감지하고, 이벤트가 발생할 때마다 keyboardState의 값을 업데이트합니다. onKey 콜백에서는 이벤트가 발생한 키보드 입력을 가져와서 이를 문자열로 결합한 후, keyboardState에 할당합니다.

결론

위에서는 플러터 Riverpod를 사용하여 키보드 입력을 처리하는 방법에 대해 알아보았습니다. Riverpod를 사용하면 플러터 앱의 상태 관리를 효과적으로 수행할 수 있으며, 키보드 입력 상태를 쉽게 관리할 수 있습니다. 이를 통해 사용자와의 상호작용을 강화하고 좀 더 유연한 앱을 개발할 수 있습니다.