[ Flutter ] Bottom Modal Keyboard Avoider

Bottom Modal을 사용할 때 안에 textField를 누르면 키보드가 생성되면서 modal이 가려지는 문제가 발생

https://pub.dev/packages/keyboard_avoider

keyboard_avoider | Flutter package

 

keyboard_avioder를 사용하면 키보드가 열릴때 알아서 해당 widget을 맞춰 올려준다.

 

---

Dependencies

yaml 파일에 keyboard_avoider의존성을 추가

dependencies:
  flutter:
    sdk: flutter
  keyboard_avoider: ^0.2.0

---

Useage

flutter에서 bottomModal을 사용

 

showModalBottomSheet(
	context: context,
	builder: (context) => BottomModal());

 

 

[ BottomModal ] 

초기에는 bottom modal widget에서 높이는 화면의 크기의 30%만 가져오도록 설정

 

초기에는 default값으로 250 이런식으로 주었지만 테스트를 하는 과정에서 화면의 크기가 다 다르다보니 화면의 크기에 맞추어서 조절하도록 수정작업 진행

final screenHeight = MediaQuery.of(context).size.height;

 

KeyboardAvoider는 키보드가 생성이 될때 키보드의 영역만큼 위로 올라와야하는 영역을 KeyboardAvoider로 감싸주기만 하면 된다.

return KeyboardAvoider(
      child: Container(
        width: double.infinity,
        height: screenHeight * 0.3,
        decoration: BoxDecoration(
          color: boxColor,
        ),
        child: Center(
            child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            textField(widget.accountDivison),
            payField(),
            SaveChildButton(context)
          ],
        )),
      ),
    );

 

하지만 bottom Modal을 사용할 경우에는 기본적으로 최대 높이가 존재한다.

그러다보니 modal의 내용이 길면 bottom overflowed가 발생하게 된다.

 

이때 이를 SinginChildScrollView로 감싸서 해당 위젯을 스크롤이 가능하게 하여 해결하는 방법도 있다.

 

하지만 그 부분은 불편하기에 bottom modal의 기본 최대높이를 없애고 원하는 대로 높이를 지정하게 해주는 옵션이 존재

 

showModalBottomSheet에 isScrollControlled: true를 주면

bottomModal의 높이를 내가 원하는 크기 만큼 지정해줄 수 있다.

showModalBottomSheet(
	isScrollControlled: true,
	context: context,
	builder: (context) => BottomModal());

 

isScrollControlled : true 속성을 주면 자연스럽게 KeyboardAvoider가 키보드가 생성되면서 bottom modal의 높이가 올라가게 되고 이때 최대 높이 제한이 없기에 자연스럽게 위젯 전체가 올라가게 된다.