개발을 하다보면 앱의 배경 색, 혹은 AppBar(뒤로가기 버튼이나 햄버거 버튼이 있는 바) 의 색을 바꿀 때 상단바의 색상도 변경하고 싶어진다.
위 두 사진을 보면, AppBar 위의 StatusBar (상단바) 아이콘 색상이 다른것을 확인 할 수 있다.
사실, 만약 저 StatusBar (상단바) 아이콘의 색상이 고정되어 있다면 큰 문제가 되지 않는다. 그렇게 되면 아래의 사진처럼 코드를 짜버리면 된다.
main.dart 에서 MaterialApp의 옵션으로 primaryColor, brightness 와 관련한 옵션을 줄 수 있기 때문이다.
위의 사진처럼, 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 -> 검은색 으로 정리 할 수 있다.
'Computer Science' 카테고리의 다른 글
| Redis는 뭐고.. In Memory 솔루션은 뭐야? (0) | 2021年02月25日 |
|---|---|
| Nginx 리버스 프록시를 사용하여 배포 할 때 해야 할 것들 (0) | 2021年02月22日 |
| gRPC(general-purpose Remote Procedure Calls)란? (1) | 2020年12月22日 |
| 프로토콜 버퍼(protocol buffer)란? (0) | 2020年12月14日 |
| SW 마에스트로 11기 후기 (3) | 2020年11月29日 |