다크모드 적용시: StatusBar (상단바) 아이콘 색상 바꿀때 유의 할 점

개발을 하다보면 앱의 배경 색, 혹은 AppBar(뒤로가기 버튼이나 햄버거 버튼이 있는 바) 의 색을 바꿀 때 상단바의 색상도 변경하고 싶어진다.

AppBar 위의 StatusBar(상단바) 아이콘 색상이 다른것을 확인 할 수 있다.

위 두 사진을 보면, AppBar 위의 StatusBar (상단바) 아이콘 색상이 다른것을 확인 할 수 있다.

사실, 만약 저 StatusBar (상단바) 아이콘의 색상이 고정되어 있다면 큰 문제가 되지 않는다. 그렇게 되면 아래의 사진처럼 코드를 짜버리면 된다.

main.dart 에서 MaterialApp의 옵션으로 primaryColor, brightness 와 관련한 옵션을 줄 수 있기 때문이다.

brightness를 지정함으로써 StatusBar (상단바) 의 아이콘 색상을 밝게 할지, 어둡게 할지 지정할 수 있다.

위의 사진처럼, Theme Parameter 에 ThemeData를 통해서 brightness를 지정함으로써 StatusBar (상단바) 의 아이콘 색상을 밝게 할지, 어둡게 할지 지정할 수 있다.

그런데 문제는 한 앱에서 StatusBar (상단바) 에 어두운 색과 밝은 색을 동시에 표현해야 할 때 생긴다.

어떻게 하면 좋을까?

일단 검색해보면 이런 링크들이 나올것이다. (굳이 들어가 볼 필요는 없다.)

stackoverflow.com/questions/57974569/icons-color-in-status-bar-flutter/61231594#61231594

SystemChrome, flutter_statusbarcolor 모듈 등, 함수를 실행하는것을 통해 상단바의 색상을 바꾸는 여러 해결방법이 StackOverFlow에서 검색 가능한데, 일단 이 방법들은 지금은 적용이 안된다.

 

방법은 생각보다 간단하다. AppBar에서 brightness를 지정 할 수 있는 옵션이 있다. 나의 경우는 다음의 사진과 같이 쓰고 있다.

사진 속 네번째 줄을 보자. this.enableDarkMode의 값에 따라 brightness Parameter 의 값으로 Brightness.dark 와 Brightness.light를 사용 할 수 있게 해두었다. 그런데 햇갈릴 수 있다.

난 검은색 / 하얀색 으로 만들고 싶은데, dark를 써야할지, light를 써야할지.. 햇갈리네...?

그러니까, 이런 셈이다.

만약 DarkMode가 켜져있다면, 앱의 전체적인 UI 톤이 어두운 계열의 색일테니 StatusBar (상단바) 의 아이콘이 하얀색이어야 할 것이다.

그런데 만약 DarkMode가 꺼져있다면, 앱의 전체적인 UI 톤이 밝은 게열의 색일테니 StatusBar (상단바) 의 아이콘이 검은색이어야 할 것이다.

 

즉, Brightness.dark -> 하얀색, Brightness.light -> 검은색 으로 정리 할 수 있다.