我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。


当前回答

使它像你的应用程序栏颜色

import 'package:flutter/material.dart';

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

其他回答

当您不使用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中使用安全区域时,更改状态栏的颜色

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

编辑为Flutter 2.0.0

当你在屏幕上有一个应用程序栏时,下面的答案就不再适用了。现在需要配置AppBarTheme。亮度和AppBarTheme。在这种情况下,systemOverlayStyle正确。

回答

而不是经常建议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
    // https://stackoverflow.com/a/58132007/1321917
    brightness: Brightness.light 
  ),
  body: ...
)

申请所有应用程序栏:

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

对于那些不使用AppBar的人

用AnnotatedRegion包装您的内容,并将值设置为SystemUiOverlayStyle。light或SystemUiOverlayStyle.dark:

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

我不能直接在帖子中评论,因为我还没有必要的声誉,但作者问了以下问题:

唯一的问题是背景是白色的,但时钟,无线和其他文本和图标也是白色的。我不知道为什么!!

对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由flutter/material.dart中的亮度常数决定。要改变这一点,调整SystemChrome解决方案,如下所示来配置文本:

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

亮度的可能值为亮度。黑暗和光明。

文档: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html

这个也可以

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