개발일지(정리) - Flutter bottomNavigationBar

모처럼 Flutter 앱을 개발하고 관련된 내용을 정리하고자 한다. 이번시간에는 bottomNavigationBar.

상황: Android / Ios -> 네비케이션 바(제스처/3버튼)과 겹치는 문제 입니다.

1. 왜 겹칠까?
   예시)
   ItemAddScreen 에서 아래의 구조로 되어있을것이다.

return AppScaffold(
  // ...
  bottomNavigationBar: Padding(
    padding: const EdgeInsets.all(16),
    child: ElevatedButton(
      onPressed: _onSave,
      child: const Text('저장'),
    ),
  ),
);

• bottomNavigationBar 에는 SafeArea가 없고,
• Android에서 시스템 내비게이션(제스처 바 / 3버튼 바)이 있는 디바이스에서는
  -그 영역(시스템 UI) 위에 bottomNavigationBar 가 그대로 들어가면서 실제 디바이스 하단에 “저장” 버튼이 네비게이션 바 뒤로 일부 가려지는 현상이 생길 수 있습니다.

Scaffold의 bottomNavigationBar 는 키보드(insets)는 피해주지만, 네비게이션 바 영역까지 항상 자동으로 올려 주진 않습니다. 그래서 SafeArea 로 한 번 더 감싸주는 게 안전합니다.

2. 해결: bottomNaviagationBar를 SafeArea로 감싸기
ItemEditScreen 의 하단 부분을 다음처럼 바꾸시면 됩니다.

// 수정
bottomNavigationBar: SafeArea(
  top: false, // 위쪽은 그대로 두고, 하단 시스템 UI만 피함
  minimum: const EdgeInsets.fromLTRB(16, 8, 16, 16),
  child: SizedBox(
    width: double.infinity,
    child: ElevatedButton(
      onPressed: _onSave,
      child: const Text('저장'),
    ),
  ),
),

포인트:

• SafeArea 가 MediaQuery 의 padding(네비게이션 바, 홈 인디케이터 등)을 읽어서 버튼을 그 영역 위로 올려줍니다.
• minimum 으로 기존의 16 padding 을 같이 주면 iOS/Android 모두에서 균일한 여백을 유지할 수 있습니다.

3. 다른 화면도 점검

cf. 물론 bottomNavigationBar+ads구글 배너도 이렇게 사용한다면 꼭 safe로 감싸야합니다.