티스토리 뷰

안드로이드 15(API 레벨 35) 이상을 타겟으로 앱을 빌드하면, 플러터 앱에서 하단 패딩 처리 방식에 변화가 생긴다. 특히 Android와 iOS 간 하단 패딩 값 차이가 두드러져, UI 겹침 이슈가 발생할 수 있다. 본 글에서는 이러한 변화의 원인과 해결 방법을 정리한다.


---

안드로이드 15(API 35) 이상, edge-to-edge 레이아웃이 기본값이다

Android 15 이상을 타겟팅하는 앱은 시스템 바(상태바, 네비게이션 바 등)를 투명하게 처리하는 edge-to-edge 레이아웃이 기본값으로 설정된다. 이로 인해 앱의 콘텐츠가 네비게이션 바 영역까지 확장되어 그려지게 된다. 그 결과, 하단에 위치한 버튼이나 UI 요소가 네비게이션 바와 겹쳐 보이거나 터치가 되지 않는 등의 문제가 발생할 수 있다.


임의로 만든 예시화면


멀쩡했던 UI가 영역이 네비게이션 뒤까지 확장되면서
버튼이 가려지는 현상이 발생되었다.
주로 하단에 sticky하게 붙어있는 버튼이나
바텀시트 영역에서 발생했다.

관련 공식 문서:
👉 Edge-to-Edge Layout 가이드
👉 Android 15 동작 변경 사항


---

플러터 앱에서의 하단 패딩 처리 방식


플러터에서는 MediaQuery.of(context).padding.bottom을 통해 시스템 UI 높이만큼 자동으로 하단 패딩 값을 제공한다. 이 값을 적절히 적용하면, 콘텐츠가 시스템 바와 겹치는 현상을 방지할 수 있다.

final bottomPadding = MediaQuery.of(context).padding.bottom;


플러터에서는 시스템 UI와 겹치지 않도록 MediaQuery를 통해 다양한 인셋 값을 제공한다. 주요 속성은 다음과 같다:

padding: SafeArea 기준 실제 콘텐츠가 침범하면 안 되는 영역이다.

viewPadding: 시스템 UI가 보이지 않아도 항상 유지되는 여백이다. 전체화면 등에서도 사용된다.

viewInsets: 키보드 같은 일시적인 요소로 가려지는 영역이다.

 

padding은 max(0.0, viewPadding - viewInsets)로 계산된다. SafeArea를 사용하면, SafeArea 위젯은 padding값을 사용해서 위젯을 감싸준다.

 

👉 MediaQuery 관련 플러터 공식문서
---

하단 패딩 처리 예시

나같은 경우 기존에 context에 확장 함수를 만들어 쓰고 있어서, 아래처럼 추가해 사용하고 있다:

extension MediaQueryBottomPadding on BuildContext {
  double get bottomPadding {
    final mediaQuery = MediaQuery.of(this);
    return math.max(
      mediaQuery.viewPadding.bottom,
      mediaQuery.viewInsets.bottom, // 네이티브 키보드가 있는 경우
    );
  }
}


---

개발 시 주의사항 및 팁


1. Android SDK 35 이상은 edge-to-edge 레이아웃이 강제되므로, 하단 콘텐츠가 시스템 바와 겹치지 않도록 MediaQuery를 활용해 반드시 패딩을 조정해야 한다.


2. 실제 기기에서 시각적 테스트가 필수이다. 다양한 해상도와 비율의 기기에서 네비게이션 바와 콘텐츠가 겹치지 않는지 확인해야 한다.


3. BottomNavigationBar, SnackBar, FloatingActionButton 등 하단 UI 요소 사용 시 특별히 더 신경써야 한다.




---

결론

타겟 SDK나 플러터 버전을 업데이트할 때는 기존 프로젝트에 어떤 사이드 이펙트가 발생할 수 있는지 항상 면밀히 검토하는 습관이 중요하다는 점을 다시금 느꼈다.


공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함