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


当前回答

这是目前为止最好的方法,它不需要额外的插件。

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

在你的刑台上像这样叫它

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

其他回答

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

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

对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由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

更新Flutter 2.0(推荐):

在最新的Flutter版本上,您应该使用:

AppBar(
  systemOverlayStyle: SystemUiOverlayStyle(
    // Status bar color
    statusBarColor: Colors.red, 

    // Status bar brightness (optional)
    statusBarIconBrightness: Brightness.dark, // For Android (dark icons)
    statusBarBrightness: Brightness.light, // For iOS (dark icons)
  ),
)

只有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
)

这有点老套,但适用于iOS和Android:

Container(
  color: Colors.red, // Status bar color
  child: SafeArea(
    left: false,
    right: false,
    bottom: false,
    child: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue, // App bar color
      ),
    ),
  ),
) 

当您不使用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 */
    )),
  ),
); 

我通过改变整个背景颜色来解决这个问题,如下所示:

在主界面:

return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
     ),
);

现有的解决方案对我没有帮助,因为我不使用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
  ),
);

语义从package:flutter/material.dart导入。 SystemUiOverlayStyle从package:flutter/services.dart导入。