[Flutter] 상단 상태바, 시스템 네비게이션바 색상 변경.

SystemChrome.setSystemUIOverlayStyle를 사용한다.

import 'package:flutter/services.dart';

// dark
@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
  return const Placeholder();
}

// statusBarColor
@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  	statusBarColor: Colors.red
  ));
  return const Placeholder();
}

// systemNavigationBarColor
@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  	systemNavigationBarColor: Colors.blue
  ));
  return const Placeholder();
}

// statusBarColor, systemNavigationBarColor
@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue,
    statusBarColor: Colors.red,
  ));
  return const Placeholder();
}

 

setSystemUIOverlayStyle method - SystemChrome class - services library - Dart API