Android 15 앱 UI 겹침이슈

개요

최근 Flutter로 개발한 Android 앱에서 이상한 증상이 발생했습니다.

하단 네비게이션바와 앱이 겹쳐지는 현상입니다.

(지인분 께서 Android PlayStore Flutter앱을 사용하며 제보해 주셨습니다. 🙂‍↕️)

아래 그림을 살펴보면 앱 하단부 버튼이 Android NavigationBar와 겹쳐집니다.

다음 버튼이 하단바와 겹쳐 눌러지지가 않습니다. 😰

 

Flutter ListView의 Text 목록도 하단바와 겹침현상. 😥 

자세히 보면 "가사: 1.0시간" Text 위젯이 하단바와 겹쳐 있습니다. 

 

원인

잘 동작하던 코드인데 왜 갑자기 바뀌었을까 고민하다 불현듯 어제 갤럭시 S24 업데이트를 진행하며 Android 14에서 15로 업데이트된 기억이 떠오릅니다.

네, 원인은 거기에 있었습니다.

Android 15 (API 35) 부터 시스템 제스처 영역이 확대되면서, SafeArea가 없으면 SingleChildScrollView나 TextField 등이 하단에 잘리는 경우가 생깁니다. 

 

문제 코드 유형

body: GestureDetector(
  onTap: () { ... },
  child: SingleChildScrollView(
    ...
  ),
), 
    

 

해결 코드 유형

body: SafeArea(
  child: GestureDetector(
    onTap: () {
      DBHelper.instance.updateMemo(widget.id, tc.text);
      FocusScope.of(context).requestFocus(FocusNode());
      fn.unfocus();
    },
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: Column(
        children: [
          tb1,
          const SizedBox(height: 8),
          ...
        ],
      ),
    ),
  ),
),

 

결론

겹치는 문제를 SafeArea 위젯으로 body를 감싸서 해결하였습니다.

SafeArea는 Android/iOS의 상단 상태바, 하단 네비게이션 바, 노치 영역 등을 자동으로 피해서 UI가 잘리는 걸 방지합니다.  

아래 그림에서 영역이 겹쳐지는 현상이 없어진 것을 확인가능합니다.

 

iOS는 기기가 없어 확인이 어렵네요.😓 

참고로 Android Studio, Kotlin (jetpack) 으로 개발된 앱은 이런 현상이 없었습니다.

 

 

Reference

Lay out your app within window insets

Display content edge-to-edge in views
 

감사합니다.