[Flutter] systemNavigationBar 색상 변경 | BNB custom(1)

문제상황

BottomNavigationBar(BNB) 디자인이 확정돼서 적용을 하려했는데

디자이너 분 말씀으로는 인디케이터 공간까지 고려해서 BNB 공백을 타이트하게 잡았다고 하셨다.

 

 

 

IOS 기준으로는 별도의 설정 없이 systemNavigationBar가
알아서 BNB 배경색에 맞게 된다.

IOS

 

 

 

근데 Android (Pixel Phone) 기준으로는 라이트모드, 다크모드 상관없이 이렇게 떴다.

삼성 폰 기준으로는 라이트 모드, 다크 모드 각각 흰색 검은색으로 떴다.

Android

 

 

 

근데 우리가 12월 출시 때는 다크모드 고려안하고

사용자 디바이스의 모드와 상관없이 라이트모드로 보이도록 하기로 했다.

 

따라서 저 시스템 네비게이션 바를 흰색으로 바꿔야하는 상황이다.

 

 

 

해결

main.dart에 해당 코드를 추가하면 된다.

@override
  Widget build(BuildContext context) {
    // 다크모드, 라이트모드 상관없이 고정 색상
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          systemNavigationBarColor: Color(0xffFFFFFF),  // 시스템 내비게이션 바 색상
          systemNavigationBarIconBrightness: Brightness.dark, // 아이콘 (바, 뒤로가기, 홈 버튼 등)
        ));      
    return ... ;
}