如何在Flutter中更改状态栏颜色？

我正在尝试将状态栏颜色更改为白色。我发现这家酒吧扑朔迷离。我试图在我的dart文件中使用示例代码。

在我的应用程序中完全正常

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.light或SystemUiOverlayStyle.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());
}

它可以通过两个步骤实现：

1. 使用FlutterStatusbarcolor软件包将状态栏颜色设置为与页面背景匹配
2. 使用AppBar.brightness属性设置状态栏按钮的颜色（电池，WiFi等）

如果您有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。

我通过更改整个背景颜色来解决它，如下所示：

在主屏幕中：

返回脚手架（

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

）;

大多数答案都在使用SystemChrome，仅适用于Android。我的解决方案是结合了AnnotatedRegion，并SafeArea为新的构件，因此它也可以在iOS中。我可以使用它，也可以不使用它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/