[Flutter] UI(3) - systemNavigationBar 색깔 바꾸기 (Device NavigationBar

 

대부분 앱을보면 앱 내부의 bottomNavigation과 디바이스의 NavigationBar의 색깔을 일치시켜 통일감 있는 UI를 보여준다.

대표적으로 유튜브 뮤직과 인스타그램을 보면

 

 

 

같은 디바이스에서도 각각 다른 앱을 실행시켰을 때, Device NavigationBar의 색상이 다른것을 확인할 수 있다.

 

Flutter에서 Device의 NavgitationBar의 색깔을 바꾸기 위해서는 SystemChrome 클래스의 setSystemUIOverlayStyle 메써드를 사용하면 된다.

 

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: Color.fromARGB(255, 14, 14, 14)));
  runApp(const MyApp());
}

 

main.dart에 위와같이 코드를 작성하면 systemNavigationBarColor를 내가 지정한대로 바꿀 수 있다. NavigationBar 색깔 뿐만 아니라

 

 

statusBarBrightness, statusBarColor 등 다양한 값들을 바꿔줄 수 있다.

 

하지만 systemNavigationBarColor를 사용할 때 주의할 점이 하나있는데, 바로 systemNavigationBarColor에 지정한 색상과 내 위젯에 설정한 색상이 Colors.ARGB(200,0,0,0) 으로 같다고 하더라도, 실제 색상은 다르게 보인다는 것이다. 직접 테스트해 본 결과, RGB값에서는 차이가 발생하지 않지만 Alpha값에서 같은 수치라도 차이가 발생한다는 것을 확인할 수 있었다.

 

위 주의점을 고려하여 A값을 255로 고정하고, RGB값을 조정하여 systemNavigationBarColor와 bottomNavigationBar의 색상을 동일하게 조정할 수 있었다.