pub.dev | flutter_keyboard_visibility

스마트폰에서 사용자가 키보드를 사용할 때는 키보드가 아래에서 위로 올라오면서 상당한 자리를 차지하게 됩니다.

 

이럴 때 키보드 위의 UI를 변경하고 싶을 때는 어떻게 해야할까요?

 

저는 이런 경우를 대비해서 엄청나게 구글링을 해보았고

 

결국 flutter_keyboard_visibility라는 패키지를 발견하게 됐습니다.

 

실제로 사용해보니 무척 편해서 소개해드립니다.

 

먼저 pub.dev에 가셔서 패키지를 찾아보세요!

pub.dev/packages/flutter_keyboard_visibility

flutter_keyboard_visibility | Flutter Package

pubspec.ymal 파일에

dependencies: flutter_keyboard_visibility: ^5.0.1를 추가해주세요.

 

저는 아주 단순한 사용 방법만 소개해드리겠습니다.

 

import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';

/// In any of your widgets...
@override
Widget build(BuildContext context) {
  return KeyboardVisibilityBuilder(
    builder: (context, isKeyboardVisible) {
      return Text(
        'The keyboard is: ${isKeyboardVisible ? 'VISIBLE' : 'NOT VISIBLE'}',
      );
    }
  );

실제 다트 파일 안에서 패키지를 import 해주시고

KeyboardVisibilityBuilder()를 사용해서 빌드해주시면 됩니다!

 

isKeyboardVisible이 알아서 keyboard가 보이는 지에 따라 bool 값을 조정해줍니다.

키보드가 보이면 bool 값은 true, 안 보이면 false로 해줍니다.

 

Ternary Operator 사용하시면 위젯 만들기 무척 간편합니다!

 

 

 

이 패키지를 추천합니다!

 

최근 null safety에도 대응하고 있어서 트렌드에 따라 업데이트도 꾸준히 되는 좋은 패키지라고 생각하여 여러분들께 강추드립니다.