[flutter] 플러터 Riverpod를 사용하여 앱에 키보드 숨기기 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

플러터에서 앱에 키보드 숨기기 기능을 추가하는 것은 사용자 인터페이스와 상호작용하는 기능을 개발할 때 중요합니다. Riverpod는 플러터의 상태 관리 라이브러리 중 하나로, 상태를 관리하고 공유하기 위해 사용됩니다. 따라서 Riverpod를 사용하여 앱에 키보드 숨기기 기능을 추가할 수 있습니다.

먼저, 플러터 프로젝트에서 Riverpod를 설정해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가합니다:

dependencies:
  riverpod: ^1.0.0

그런 다음, 다음 코드를 포함하는 새로운 파일을 생성합니다 (예: keyboard_provider.dart):

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:riverpod/riverpod.dart';

final keyboardProvider = Provider<KeyboardService>((ref) {
  return KeyboardService();
});

class KeyboardService {
  final _keyboardController = TextEditingController();
  final _focusNode = FocusNode();

  void hideKeyboard(BuildContext context) {
    _focusNode.unfocus();
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }

  void dispose() {
    _keyboardController.dispose();
    _focusNode.dispose();
  }
}

class KeyboardWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final keyboardService = watch(keyboardProvider);

    return GestureDetector(
      onTap: () {
        keyboardService.hideKeyboard(context);
      },
      child: Scaffold(
        body: Center(
          child: TextField(
            controller: keyboardService._keyboardController,
            focusNode: keyboardService._focusNode,
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 Riverpod Provider(keyboardProvider)를 사용하여 KeyboardService 객체를 만듭니다. KeyboardService는 키보드 제어와 관련된 기능을 제공합니다. hideKeyboard 메서드는 키보드를 숨기는 역할을 합니다.

또한 위의 코드에서는 KeyboardWidget을 정의합니다. 이 위젯은 ConsumerWidget을 상속하며, keyboardProvider을 통해 KeyboardService를 사용합니다. onTap 핸들러를 통해 hideKeyboard 메서드를 호출하여 키보드를 숨깁니다.

마지막으로, 앱의 어떤 부분에 다음과 같이 KeyboardWidget을 추가하여 키보드 숨기기 기능을 사용할 수 있습니다:

void main() {
  runApp(
    ProviderScope(
      child: MaterialApp(
        home: KeyboardWidget(),
      ),
    ),
  );
}

이제 플러터 앱에서 Riverpod를 사용하여 키보드를 숨기는 기능을 추가했습니다. 터치 이벤트를 감지하고 키보드를 숨기는 기능은 Riverpod의 상태 관리 기능을 사용하여 보다 효율적으로 구현할 수 있게 해줍니다.

추가적으로, Riverpod 공식 문서를 참조하면 더 많은 Riverpod 기능과 사용법을 확인할 수 있습니다.