하단버튼 키보드가 가리지 않게 이동시키기

구현 목표 🧐

하단버튼이 키보드에 가려지지 않게 사진과 같이 키보드 높이에 맞춰 버튼을 올려보자. 아래 설명은 이해를 돕기위해 간단한 예제 코드로 진행해보았다.

---

bottomNavigationBar: SafeArea(
  child: ElevatedButton(
    onPressed: () {},
    child: Text("다음"),
  ),
),

 

현재 코드는 네비게이션 바에 버튼을 배치하고 SafeArea 여백만 주고 있을 뿐 키보드가 올라와버리면 그대로 버튼을 가리게 되어버린다. 여기서 MediaQuery.of(context).viewInsets.bottom을 사용하면 키보드 높이를 감지하여 버튼을 자동으로 올릴 수 있다.

bottomNavigationBar: AnimatedPadding(
  duration: Duration(milliseconds: 100),
  padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: SafeArea(
    child: ElevatedButton(
      onPressed: () {},
      child: Text("다음"),
    ),
  ),
),

 

✅ 1. 키보드 높이 자동 감지 → MediaQuery.of(context).viewInsets.bottom
✅ 2. 부드러운 애니메이션 적용 → AnimatedPadding 사용
✅ 3. SafeArea 적용 → iPhone 노치 & Android 홈 바 대응

 

https://medium.com/%ED%8C%80%EC%9B%8C%ED%81%AC-%EC%82%AC%EC%83%9D%ED%99%9C-%EB%B8%94%EB%A1%9C%EA%B7%B8/padding-viewpadding-%EA%B7%B8%EB%A6%AC%EA%B3%A0-viewinsets%EC%97%90-%EB%8C%80%ED%95%B4-bce10a1f4b96

위코드에서 viewInsets을 사용하고 있는데 이에대한 자세한 설명은 요 블로그에서 너무 친절하고 자세하게 설명하고 있다. 한줄요약하자면 viewInsets은 화면이 가려지는 부분을 이야기한다. viewInsets.bottom은 화면 아래쪽 가려지는 높이, 즉 키보드에 의해 가려지는 높이를 동적으로 가져오는 속성이라고 할 수 있다. 

 

AnimatedPadding 으로 여백 변경 코드를 랩핑하면  padding(여백)이 변경될 때 애니메이션 효과를 적용해줄 수 있다.