[플러터] Status bar 색상 변경하기

앱이 개발되고 디자인이 갖춰지면 스마트폰 최상단에 위치한

상태 바의 색상이 어색해 보일 것이다.

상태 바의 배경 색상과 글자 색상을 간단하게 변경할 수 있다.

 

코드

bool isDarkMode;

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
        statusBarColor: Colors.white, // Color for Android
        statusBarIconBrightness:
            isDarkMode ? Brightness.light : Brightness.dark,
        statusBarBrightness: isDarkMode
            ? Platform.isIOS
                ? Brightness.dark
                : Brightness.light
            : Platform.isIOS
                ? Brightness.light
                : Brightness.dark
        ));

 

statusBarColor는 안드로이드에서만 동작하는 배경 색상이다.

IOS에서는 statusBarBrightness 속성을 통해 변경할 수 있다.

해당 속성이 dark라면 IOS에서는 배경 색상이 black, 글자 색상이 white가 되지만,

안드로이드에서는 배경 색상은 오로지 statusBarColor과 관련이 있고, 글자 색상이 statusBarBrightness 속성을 따르게 된다.

따라서 안드로이드에서는 해당 속성이 dark라면 글자 색상이 black으로 변경된다.

IOS와 안드로이드를 반대로 해야 한다는 점을 명심하자.