[Flutter] 상태 표시줄 또는 스테이터스 바 설정하기

 

 

 

 

안녕하세요 오늘은 아래 사진에 있는 상단 상태표시줄과 하단 내비게이션 바를 커스텀해서 본인의 앱에 맞게 설정해 보겠습니다.

 

 

 

 

1. 기본설정

상태 표시줄을 설정하기 위해서 기본적으로 SystemChrome 클래스를 사용해야 합니다. main 함수에서 호출하는 것은 상태 표시 줄의 스타일을 앱 전체에 일관되게 적용하기 위한 좋은 방법입니다.

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIMode();
  runApp(''');
}

 

 

2. 상단바, 하단바 둘 다 없애기

 

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(''');
}

세팅이 끝나고 앱이 실행되도록 async - await을 걸어줍니다. 맨 처음에 나오는 코드는 해당글에 설명이 나옵니다.

https://jutole.tistory.com/31

WidgetsFlutterBinding.ensureInitialized();

 

 

 

 

3. 상단바만 보이게

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.top]);
  runApp(''');
}

 

 

 

 

4. 하단바만 보이게

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);
  runApp(const DelliApp());
}

 

 

여기까지가 상태바를 없애는 방법이었습니다. 이제 상태바를 본인의 앱에 맞게 설정해 보겠습니다.

 

 

 

5. 상단바 설정하기

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: [
      SystemUiOverlay.top,
      SystemUiOverlay.bottom,
    ],
  );
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.yellow,
      statusBarIconBrightness: Brightness.light,
    ),
  );
  runApp(const DelliApp());
}

상단바와 하단바 둘 다 보여주는 코드인데 둘다 보여주려면 그냥 저 코드는 빼시면 됩니다. 혹시 어떻게 둘다써야될지 모를 분들을 위해 해놨습니다.

 

 

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.yellow,
      statusBarIconBrightness: Brightness.light,
    ),
  );

상단바를 설정하는 코드는 이 부분입니다. 상태바를 없애는 거랑은 다르게 await이 필요 없습니다. statusBarColor를 설정하면 자유롭게 색상을 설정할 수 있습니다. statusBarIconBrightness는 스테터스바에 있는 아이콘들의 색상을 설정할 수 있습니다. 하지만 light와 dark로만 설정 가능합니다. 하얀색이 잘 안 보이니 Brightness.dark로 변경해 보겠습니다.

 

 

SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.yellow,
      statusBarIconBrightness: Brightness.dark,
    ),
  );

 

 

 

차이가 눈에 보이시죠?

 

 

6. 하단바 설정하기

SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      systemNavigationBarDividerColor: Colors.green, //하단바 디바이더 색상
      systemNavigationBarColor: Colors.yellow,  //하단바 색상
      systemNavigationBarIconBrightness: Brightness.dark, //하단바 아이콘 색상
    ),
  );

 

 

 

7. 추가로.. 

void main() {
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      systemNavigationBarIconBrightness: Brightness.light, //하단바 라이트모드 고정
      statusBarBrightness: Brightness.light, //상단바 라이트모드 고정
    ),
  );
  runApp(const App());
}

 

다크모드 고정은 Brightness.dart

 

 

 

8.  원하는 페이지에서 상태바 수정하기

    return AnnotatedRegion(
      child: Scaffold(),
      value: SystemUiOverlayStyle.light,
    );

 

Appbar 사용없이도 AnnotatedRegion 위젯을 사용하면 상태바 수정이 가능해진다.