Flutter에서 상태 표시 줄 색상을 변경하는 방법은 무엇입니까?

상태 표시 줄 색상을 흰색으로 변경하려고합니다. 나는 이 술집을 플러터 에서 찾았다 . 내 다트 파일에 예제 코드를 사용하려고했습니다.

내 앱에서 완전히 잘 작동합니다.

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

( 이 패키지 )

UPD : 또 다른 솔루션

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

업데이트 (권장) :

최신 Flutter 버전에서는 다음을 사용해야합니다.

AppBar(
  backwardsCompatibility: false,
  systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
)

Android 만 (더 많은 유연성) :

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.blue, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
  ));
}

iOS 및 Android :

appBar: AppBar(
  backgroundColor: Colors.red, // status bar color
  brightness: Brightness.light, // status bar brightness
)

SystemChrome.setSystemUIOverlayStyle()시스템 전체 서비스이고 다른 경로에서 재설정되지 않는 자주 제안 되는 대신 AnnotatedRegion<SystemUiOverlayStyle>위젯이며 래핑하는 위젯에만 영향을주는를 사용할 수 있습니다.

AnnotatedRegion<SystemUiOverlayStyle>(
   value: SystemUiOverlayStyle(
      statusBarColor: Colors.white,
  ),
  child: Scaffold(
      ...
  ),
)

사용하시는 분들을 위해 AppBar

사용 AppBar하는 경우 상태 표시 줄 색상 업데이트는 다음과 같이 간단합니다.

Scaffold(
  appBar: AppBar(
    // Use [Brightness.light] for black status bar 
    // or [Brightness.dark] for white status bar
    brightness: Brightness.light 
  ),
  body: ...
)

모든 앱 바를 신청하려면 :

return MaterialApp(
  theme: Theme.of(context).copyWith(
    appBarTheme: Theme.of(context)
        .appBarTheme
        .copyWith(brightness: Brightness.light),
  ...
  ),

사용하지 않는 분 AppBar

콘텐츠를로 래핑 하고 또는로 AnnotatedRegion설정 value합니다 .SystemUiOverlayStyle.lightSystemUiOverlayStyle.dark

return AnnotatedRegion<SystemUiOverlayStyle>(
  // Use [SystemUiOverlayStyle.light] for white status bar 
  // or [SystemUiOverlayStyle.dark] for black status bar
  value: SystemUiOverlayStyle.light,
  child: Scaffold(...),
);

사용하지 않을 때 상태 표시 줄 색상 변경 AppBar

먼저 가져 오기

import 'package:flutter/services.dart';

이제 아래 코드를 사용하여 응용 프로그램에서 상태 표시 줄 색상을 변경하십시오. AppBar

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(

    statusBarColor: AppColors.statusBarColor,/* set Status bar color in Android devices. */
    
    statusBarIconBrightness: Brightness.dark,/* set Status bar icons color in Android devices.*/
    
    statusBarBrightness: Brightness.dark)/* set Status bar icon color in iOS. */
); 

iOS사용할 때 상태 표시 줄 색상을 변경하려면SafeArea

Scaffold(
  body: Container(
    color: Colors.red, /* Set your status bar color here */
    child: SafeArea(child: Container(
      /* Add your Widget here */
    )),
  ),
); 

아직 필요한 평판이 없기 때문에 스레드에 직접 댓글을 달 수 없지만 저자는 다음과 같이 질문했습니다.

유일한 문제는 배경이 흰색이지만 시계, 무선 및 기타 텍스트와 아이콘도 흰색으로 표시된다는 것입니다. .. 이유를 모르겠습니다 !!

이 스레드에 오는 다른 사람을 위해 여기에 저에게 효과적이었습니다. 상태 표시 줄의 텍스트 색상은의 밝기 상수에 의해 결정됩니다 flutter/material.dart. 이를 변경하려면 다음 SystemChrome과 같이 솔루션을 조정 하여 텍스트를 구성하십시오.

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarBrightness: Brightness.dark,
    ));

가능한 값 Brightness은 Brightness.dark및 Brightness.light입니다.

문서 : https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

이것은 나를 위해 일했습니다.

수입 서비스

import 'package:flutter/services.dart';

그런 다음 다음을 추가하십시오.

@override
  Widget build(BuildContext context) {

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
      statusBarBrightness: Brightness.dark,
    ));
    return MaterialApp(home: Scaffold(

나는 이것이 당신을 도울 것이라고 생각합니다.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white, // navigation bar color
        statusBarColor: Colors.white, // status bar color
        statusBarIconBrightness: Brightness.dark, // status bar icons' color
        systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
    ));

이것이 당신이 알아야 할 모든 것입니다.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.amber, // navigation bar color
    statusBarColor: Colors.white, // status bar color
    statusBarIconBrightness: Brightness.dark, // status bar icon color
    systemNavigationBarIconBrightness: Brightness.dark, // color of navigation controls
  ));
  runApp(MyApp());
}

2 단계로 달성 할 수 있습니다.

1. FlutterStatusbarcolor 패키지를 사용하여 페이지 배경과 일치하도록 상태 표시 줄 색상 설정
2. AppBar.brightness속성을 사용하여 상태 표시 줄 버튼 (배터리, Wi-Fi 등) 색상을 설정합니다.

다음이있는 경우 AppBar:

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        // Other AppBar properties
      ),
      body: Container()
    );
  }

페이지에 앱 바를 표시하지 않으려면 :

  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0.0,
        toolbarHeight: 0.0, // Hide the AppBar
      ),
      body: Container()
  }

main.dart 파일 가져 오기 서비스에서 다음과 같이

  import 'package:flutter/services.dart';

그리고 빌드 메서드 내부에 반환하기 전에이 줄을 추가하십시오.

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.orange
)); 

이렇게 :

@override
 Widget build(BuildContext context) {
   SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
       statusBarColor: CustomColors.appbarcolor
    ));
    return MaterialApp(
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }

이것도 작동합니다

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

 return Scaffold(
      backgroundColor: STATUS_BAR_COLOR_HERE,
      body: SafeArea(
        child: scaffoldBody(),
      ),
);

이것이 최선의 방법이며 추가 플러그인이 필요하지 않습니다.

Widget emptyAppBar(){
  return PreferredSize(
      preferredSize: Size.fromHeight(0.0), 
      child: AppBar(
        backgroundColor: Color(0xFFf7f7f7),
        brightness: Brightness.light,
      )
  );
}

비계에서 이렇게 부르세요

return Scaffold(
      appBar: emptyAppBar(),
     .
     .
     .

앱 바 색상처럼 만드는 방법

import 'package:flutter/material.dart';

 Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
  ));
 }

iOS 및 Android 모두에서 작동

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  return Scaffold();
}
    

@override
Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(brightness: Brightness.dark),
    child: Scaffold()
    ....
  )
}

내가 직접 한 해결책을 제외하고 언급 된 모든 답변에 문제가있었습니다. Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) 보기의 경우 appBar가 추가되지 않은 곳은 정확한 높이가 상태 표시 줄 높이와 일치하는 배경이있는 컨테이너를 사용합니다. 이 시나리오에서 각 뷰는 서로 다른 상태 색상을 가질 수 있으며 어떻게 든 잘못된 뷰가 어떻게 든 잘못된 색상을 가지고 있다는 논리에 대해 걱정하고 생각할 필요가 없습니다.

나는 사용 AppBar하지 않고 사용자가 앱 테마를 전환 할 때마다 진술을하고 싶지 않기 때문에 기존 솔루션 중 어느 것도 도움 이되지 않았습니다. 밝은 모드와 어두운 모드 사이를 전환하는 반응적인 방법이 필요 했고 상태 표시 줄 색상을 설정 AppBar하는 위젯 을 사용하는 것을 발견했습니다 Semantics.

기본적으로 다음과 같이합니다.

return Semantics(
  container: false,  // don't make it a new node in the hierarchy
  child: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light,  // or .dark
    child: MyApp(),  // your widget goes here
  ),
);

• Semantics에서 가져옵니다 package:flutter/material.dart.
• SystemUiOverlayStyle에서 가져옵니다 package:flutter/services.dart.

다음과 같이 전체 배경색을 변경하여 해결했습니다.

메인 화면에서 :

return Scaffold (

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

대부분의 답변은 SystemChromeAndroid에서만 작동 하는 것을 사용 하고 있습니다. 내 솔루션을 모두 결합하는 것입니다 AnnotatedRegion그리고 SafeArea그것은 또한 아이폰 OS에서 작동되도록 새로운 위젯으로. 그리고 나는 그것을 사용하거나 사용하지 않고 사용할 수 있습니다 AppBar.

class ColoredStatusBar extends StatelessWidget {
  const ColoredStatusBar({Key key, this.color, this.child}) : super(key: key);

  final Color color;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? Colors.blue,
      ),
      child: Container(
        color: color ?? Colors.blue,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

사용법 : 페이지 위젯 상단에 배치합니다.

@override
Widget build(BuildContext context) {
  return ColoredStatusBar(
    child: /* your child here */,
  );
}

원하는 것은 테마입니다. AppBar 색상보다 훨씬 더 중요합니다.

https://flutter.io/cookbook/design/themes/