[Flutter] SystemChrome class (SystemUI Control)

운영체제에서 제공하는 그래픽 인터페이스(시스템 UI)의 특정 부분과 어플 간의 상호작용을 제어합니다. 즉, 시스템 UI 의 색상이나 모드를 변경 가능하고 앱 실행 방향이나 변경 이벤트를 전달 받을 수 있습니다. 

 

 

---

 

Static Method of SystemChrome class

 

함수	설명
setEnabledSystemUIMode()	앱의 풀스크린 모드를 지정합니다. (예를 들어 핸드폰 상단의 시간이나 배터리 잔량이 보이지 않게 가릴 수 있습니다.)
setPreferredOrientations()	앱을 실행하는 방향을 지정합니다.  (가로, 가로좌우반전, 세로, 세로좌우반전 옵션이 있습니다.)
setSystemUIChangeCallback()	시스템 UI 가 변경되면 콜백함수를 실행합니다.
setSystemUIOverlayStyle()	시스템 UI 의 색상을 변경합니다. (dark, light)

 

 

---

 

Example - 시스테UI 인 상태바의 색상을 변경하는 코드

 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';  // SystemChrome 을 사용하기 위한 패키지

void main() {
  runApp(const MyApp(
    title: 'Flutter Demo',
  ));
}

class MyApp extends StatelessWidget {

  final String title;

  const MyApp({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
  
    // 개인적으로 뿌리에 해당하는 MaterialApp build() 부분에 삽입하는 것을 추천합니다.
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(title: 'YW Project'),
    );
  }
}

 

 

 

 

---

 

 

 

Reference

 

https://api.flutter.dev/flutter/services/SystemChrome-class.html

SystemChrome class - services library - Dart API

 

https://link.coupang.com/a/UcBSZ

Must Have 코드팩토리의 플러터 프로그래밍:Dart & Flutter 입문부터 실전에 유용한 10가지 앱 개발과

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."