[Flutter] StatusBar(상태바) 디자인, 숨기기

App의 UI를 디자인하다보면 가끔 AVD의 StatusBar가 거슬릴 때가 있다.

( 특히 안드로이드 )

 

이러한 StatusBar는 아예 안보이게 숨길 수도 있고 색을 변경하여 디자인으로 활용할 수 있다.

---

1. Hide (숨기기)

import 'package:flutter/services.dart';

해당 package를 import 후 아래 코드를 build 함수 안에 적어준다.

( [ ] 안에 보고싶은 상단, 하단 StatusBar를 입력해준다. 현재 리스트가 비어있으므로 모든 StatusBar를 숨김 )

SystemChrome.setEnabledSystemUIOverlays([]);

 

---

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    SystemChrome.setEnabledSystemUIOverlays([]);

    return MaterialApp(
      title: 'Pet Finder',
      theme: ThemeData(
        primaryColor: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        textTheme: GoogleFonts.montserratTextTheme(),
      ),
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

---

기호에 따라 원하는 StatusBar만 볼 수 있다.

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]); // 상단 StatusBar 생성

 

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); // 하단 StatusBar 생성

---

2. Color (색 바꾸기)

import 'package:flutter/services.dart';

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: // 원하는 색 
 ));

 

---

예시

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 투명색 
 ));

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.grey, // 회색 
 ));