[flutter] 키보드가 열렸는지 닫혔는지 확인하는 방법

플러터에서 키보드가 열렸는지 닫혔는지 확인하는 방법

사용자가 키보드를 열었을 때와 닫았을 때 디자인을 다르게 보이게 하거나, 특정 이벤트를 실행시키도록 앱을 만들어야 하는 상황이 생길 수 있습니다. 이때 flutter_keyboard_visibility 패키지를 이용하면 키보드의 활성 상태를 간단하게 확인할 수 있습니다.

 

아래는 패키지를 활용해서 키보드 상태가 변경될 때마다 글자와 자물쇠 아이콘이 바뀌는 예시 화면입니다. 

 

패키지 설치

패키지의 최신 버전을 확인하고, pubspec.yaml 파일의 dependencies 위치에 패키지를 추가하여 설치합니다. (https://pub.dev/packages/flutter_keyboard_visibility/install)

// pubspec.yaml
dependencies:
  flutter_keyboard_visibility: ^5.3.0

 

키보드 활성 상태 확인하기

설치한 패키지의 KeyboardVisibilityBuilder 위젯으로 키보드 상태를 감지하려는 코드의 상위 위젯을 감싸줍니다. 그리고서 isKeyboardVisible 값으로 키보드 열림/닫힘 상태를 확인하고 구현하시려는 기능을 만드시면 됩니다.

 

혹시 이 과정을 진행하는 중에 위젯이 정상적으로 작동하지 않는다는 오류가 발생한다면, 앱을 완전히 종료(Stop) 하셨다가 다시 실행해보시면 잘 동작할거에요.

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

@override
Widget build(BuildContext context) {
  return KeyboardVisibilityBuilder(
    builder: (context, isKeyboardVisible) {
      return Text(
        isKeyboardVisible ? '키보드 열림' : '키보드 닫힘', // isKeyboardVisible 값으로 키보드 상태 확인
      );
    },
  };
)

 

키보드 닫기 이벤트

추가로 패키지에 있는 KeyboardDismissOnTap 위젯을 이용하면 키보드를 간단하게 닫을 수 있습니다. 이것도 마찬가지로 키보드가 닫히도록 감지할 영역을 위젯으로 감싸주면 됩니다.

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

@override
Widget build(BuildContext context) {
  return KeyboardDismissOnTap( // 위젯으로 감싸주면 끝!
    child: MyHomePage(),
  );
}

 

다음에는 패키지를 사용하지 않고 키보드의 활성 상태를 확인하는 방법에 대해서도 소개해드릴게요. 저의 글이 정답도, 최선의 코드도 아니지만 답답했던 문제를 해결하시는데 도움이 되었으면 좋겠습니다 😄