[ Flutter ] 키보드 올라올 때 화면이 같이 올라가요

 

요즘 캡스튼 프로젝트를 하느라 정신이 없습니다.

그 중에서 검색창과 키보드와 관련된 문제를 해결하기 위해

노력한 것을 기록으로 남겨보려고 해요..

어제, 오늘 삽질하다가 어찌저찌 해결을 했습니다.

 

 

 

문제점

 

검색창을 누르면 키보드가 아래에서 올라오는데, 문제는 키보드가 올라오면서 화면을 위로 밀어버려

내가 뭘 검색하는지 보이지가 않습니다.

심지어 스크롤을 아래로 내려도 검색창은 내려오지가 않아서 볼 방법이 없었습니다.

 

해결방법

구글링을 하면서 많은 자료들을 찾아봤는데,

공통적으로 얘기하는 것이 Scaffold에 resizeToAvoidBottomInset을 적용하는 것이었습니다.

resizeToAvoidBottomInset: true,

 

하지만 제 경우에는 해결이 되지 않았고 다른 방법을 찾아야 했는데요.

 

방법을 바꿔서, 키보드의 출현 여부를 감지해서,

출현했을 때 위에 SizedBox를 추가하는 방법으로 이 문제를 해결하려고 하였습니다.

 

https://pub.dev/packages/flutter_keyboard_visibility

flutter_keyboard_visibility | Flutter package

키보드 출현을 감지하는 라이브러리입니다.

이 라이브러리를 사용해 문제를 해결했습니다.

 

late final KeyboardVisibilityController _keyboardVisibilityController;
late final Stream<bool> _keyboardStream;
bool _isKeyboardVisible = false;

  @override
  void initState() {
    super.initState();
    _keyboardVisibilityController = KeyboardVisibilityController();
    _keyboardStream = _keyboardVisibilityController.onChange;
    _keyboardStream.listen((visible) {
      setState(() {
        _isKeyboardVisible = visible;
        print('Keyboard visibility changed: $visible');
      });
    });
  }

 

먼저 스크린에 위 코드를 추가하였습니다.

이렇게 되면 키보드가 열림과 닫힘을 모두 감지할 수 있습니다.

 

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    if (_isKeyboardVisible)
      SizedBox(
        height: 150.h,
      ),

 

이후 키보드가 열려있을때만 SizedBox를 맨 상단에 추가하여

검색창이 위로 밀려나지 않도록 했습니다.

 

결과