Flutter - BottomSheet 높이 키보드 영역 만큼 동적으로 조절

BottomSheet를 사용하는데 TextField가 있어서, 내부 요소들 + BottomSheet의 최대 높이를 모두 조절해야 하는 상황이 생겼다. 

이것 때문에.. 많은 시간을 버린 것 같다..결국 생각 해낸 것이 TextField클릭 이벤트로 높이를 조절 하는 방법이다.

방법

- 위젯을 StatefulWidget으로 변경

- 내부 콘텐츠의 Padding에 "MediaQuery.of(context).viewInsets.bottom"추가

- TextField의 FocusNode를 활용해 클릭 시 bottomSheet의 height를 적용

 

 

코드

 FocusNode focus = FocusNode(); 
  late bool isOpenKeyBoard;
  @override
  void initState() {
    super.initState();
    focus.addListener(_onFocusChange);
    isOpenKeyBoard = focus.hasFocus;
  }

  @override
  void dispose() {
    super.dispose();
    focus.removeListener(_onFocusChange);
    focus.dispose();
  }

  void _onFocusChange() {
    print("Focus: ${focus.hasFocus.toString()}"); // true,false
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: mew,// MediaQuery width
      height: isOpenKeyBoard // true 이면 0.45, false이면 0.45 + 키보드 영역
          ? meh * 0.45 // MediaQuery height
          : meh * 0.45 + MediaQuery.of(context).viewInsets.bottom,
      padding: EdgeInsets.only(
        left: 33,
        right: 33,
        bottom: MediaQuery.of(context).viewInsets.bottom,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          titleAndRightBack("AppBar", context),
          TextField(
              focusNode: focus,
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.text,
              textAlignVertical: TextAlignVertical.center,
              ),
        ],
      ),
    );
  }