[Flutter] 상단 네비게이션 색상(시간, 상태) 보이도록 수정 #navigationBar #상단탭 #top navigation bar #top status bar #액션바

Flutter로 모바일 개발을 하게되면 Scaffold라는 위젯으로 UI구조의 시작을 알리게 됩니다.

네이티브로 UI를 구성하게 되면 일일히 구분해주었던 영역을 Scaffold위젯하나로 정리를 하게되니,

저로써는 너무나 편리하게 느껴지는데요. 여러분도 그러실까요?

 

하지만 Scaffold로 위젯의 구조를 정해주게될 때, appBar파라메터를 설정해주지 않게 되면,

다음과 같이 상단에 시계색상과 네트워크 상태 색상이 보이지 않게 됩니다.

 

상단을 보시면 플러터 로고는 보이지만 그외 색상은 현재 보이지 않습니다.

(상단바의 이름은 상단 네비게이션바, status바 등 이름으로 불립니다.

플러터에서는 statusBar라고 불리지만, 이해하기 쉽도록 다양한 이름을 같이 부르도록 할게요)

위 화면의 코드는 다음과 같이 이루어져 있습니다.

 

쭉 ~ child를 따라가다보면 Scaffold가 보이실 텐데요.

그 하단에 SafeArea가 있고 이후 임의로 정의된 위젯들이 선언되어 있습니다.

 

그럼, 상단의 상태값들이 보이게 수정해보도록 하겠습니다.

 

상단 상태(statusBar, top navigation bar)보이도록 수정

appBar파라메터를 정의해주지 않고 body파라메터에만 위젯을 설정해주는 경우만 해당됩니다.

우선 AnnotatedRegion이라는 위젯으로 body의 위젯들을 감싸줍니다.

 

그리고 상단의 상태바의 색상을 지정해주는데요.

가장, 중요한 왜? 왜? 상태바의 색상이 안보이느냐? 의 대한 대답은

색상이 현재 System Brightness자체의 색상으로 보여지고 있기 때문입니다.

'다크 모드'라고 들어보셨을까요?

스마트폰에 기본 모드는 밝지만, 다크모드는 어두운 분위기를 띄게 되는데요.

 

바로, 네비게이션 상단 바의 색상은 기본 모드이기 때문에 흰 색 글씨로 보이게 되는 것 입니다.

자세히 보시면 흰 색으로 얼핏 보이는 것을 알 수 있습니다.

 

 

이런 현상을 해결하기 위해서는 상단바의 색상을 다크모드로 변경해주어야 합니다.

(따로 임의의 색상을 설정하는 기능이 없기 떄문입니다)

 

먼저, 현재 다크모드인지 확인해주는 bool프로퍼티를 생성합니다.

(build안에서 또는 initState하는 시점에 생성해주세요^^)

@override 
Widget build(BuildContext context) {
  bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;
  
  return Scaffold(
    ...
  )
}

 

AnnotatedRegion위젯으로 body하위 위젯을 감싸줍니다.

return Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      ...
    ),
    child: SafeArea(
      ...
    )
  )
)

 

SystemUiOverlayStyle 파라메터를 살펴보겠습니다.

- statusBarColor : 상단 네비게이션바의 배경색상

- statusBarIconBrightness : 시간, 와이파이, 배터리 상태를 Icon으로 표현합니다. 

 

statusBarColor는 기본 primary색상이 적용되어 지정해주지 않아도 되지만,

보통 Scaffold의 배경색상을 White로 설정하면 이질감이 있기 떄문에 투명하게 지정해주는 것을 추천합니다.

 

statusBarIconBrightness가 현재 '기본모드' 이기 때문에 '다크모드'로 변형해주어야 글자가 보인다는 것을

앞의 내용을 이해했다면 생각할 수 있습니다.

 

아래와 같이 설정해주도록 하겠습니다.

AnnotatedRegion<SystemUiOverlayStyle>(
  value: SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: isDarkMode ? Brightness.light : Brightness.dark
  )
)

 

결과는?

 

위 상단의 글자가 이제 식별이 되는 것을 볼 수 있습니다.

 

상단 네비게이션의 글자가 보이지 않는다고해서 당황하지마시고,

차근차근 위의 설명을 토대로 만들어가시면 되겠습니다.

 

감사합니다🍸