[Flutter] 시스템 디스플레이 모드(라이트, 다크)가 변경 되었을때 상태바 색상 변경 방법.

WidgetsBindingObserver의 didChangePlatformBrightness 사용하면 된다.

 

앱 사용 중에 시스템  디스플레이 모드(라이트, 다크) 상태를 변경하면 상태바, 네이게이션바의 색상이 변경되지 않는다. 

@override
void didChangePlatformBrightness() {
  bool isDark = SchedulerBinding.instance.window.platformBrightness == Brightness.dark;
  if (isDark) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
     statusBarColor: Colors.black
    ));
  } else {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
     statusBarColor: Colors.white
    ));
  }
  super.didChangePlatformBrightness();
}

 

WidgetsBindingObserver class - widgets library - Dart API

 

기본 플러터 앱 라이프 사이클 상태 확인 샘플에 didChangePlatformBrightness 함수를 추가해서 확인한다.

class AppLifecycleReactor extends StatefulWidget {
  const AppLifecycleReactor({ Key? key }) : super(key: key);

  @override
  _AppLifecycleReactorState createState() => _AppLifecycleReactorState();
}

class _AppLifecycleReactorState extends State<AppLifecycleReactor> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    super.dispose();
  }

  late AppLifecycleState _notification;

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() { _notification = state; });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Last notification: $_notification');
  }
  
  @override
  void didChangePlatformBrightness() {
    bool isDark = SchedulerBinding.instance.window.platformBrightness == Brightness.dark;
    if (isDark) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.black
      ));
    } else {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.white
      ));
    }
    super.didChangePlatformBrightness();
  }
}