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

Question

我正在尝试将状态栏颜色更改为白色。 我在 flutter 上找到了这家酒吧。 我尝试在我的 dart 文件中使用示例代码。

Answer 1

更新 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
)

有点hacky，但适用于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
      ),
    ),
  ),
) 

Answer 2

在我的应用程序中工作得很好

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：推荐解决方案（Flutter 2.0 及更高版本）

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

Answer 3

对于那些使用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包装您的内容并将value设置为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(...),
);

Answer 4

编辑 Flutter 2.0.0

当屏幕上有AppBar时，下面的答案不再起作用。 在这种情况下，您现在需要正确配置AppBarTheme.brightness和AppBarTheme.systemOverlayStyle 。

回答

您可以使用AnnotatedRegion<SystemUiOverlayStyle>作为小部件并且仅对您包装的小部件有效，而不是经常建议的SystemChrome.setSystemUIOverlayStyle() ，它是系统范围的服务并且不会在不同的路由上重置。

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

Answer 5

这对我有用：

进口服务

import 'package:flutter/services.dart';

然后加：

@override
  Widget build(BuildContext context) {

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

Answer 6

不使用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. */
); 

使用SafeArea时更改iOS中的状态栏颜色

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

Answer 7

我认为这会帮助你：

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
    ));

Answer 8

由于我还没有必要的声誉，因此我无法直接在线程中发表评论，但作者提出了以下问题：

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

对于任何来到这个线程的人，这对我有用。 状态栏的文本颜色由flutter/material.dart中的 Brightness 常数决定。 要更改这一点，请调整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

Answer 9

这是您需要知道的一切：

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());
}

Answer 10

什么对我有用（对于那些不使用 AppBar 的人）

添加具有首选颜色的 AppbBar，然后设置： toolbarHeight：0

 child: Scaffold(
    appBar: AppBar(
      toolbarHeight: 0,
      backgroundColor: Colors.blue,
      brightness: Brightness.light,
    )

Answer 11

它可以通过2个步骤来实现：

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()
  }

Answer 12

[在 Android 中测试] 这就是我能够使状态栏透明并且文本颜色变暗的方法，

import 'package:flutter/services.dart';

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
    statusBarIconBrightness: Brightness.dark // dark text for status bar
  ));
  runApp(MyApp());
}

Answer 13

在 main.dart 文件导入服务上，如下所示

  import 'package:flutter/services.dart';

并且在 build 方法中只需在 return 之前添加这一行

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,
    ),
  );
 }

Answer 14

这个也可以

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

Answer 15

这是迄今为止最好的方法，它不需要额外的插件。

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

并像这样在你的脚手架中调用它

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

Answer 16

大多数答案都是使用仅适用于 Android 的SystemChrome 。 我的解决方案是将AnnotatedRegion和SafeArea合并到新的 Widget 中，这样它也可以在 iOS 中使用。 我可以在有或没有AppBar的情况下使用它。

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

  final Color color;
  final Widget child;
  final Brightness brightness;

  @override
  Widget build(BuildContext context) {
    final defaultColor = Colors.blue;
    final androidIconBrightness =
        brightness == Brightness.dark ? Brightness.light : Brightness.dark;
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: color ?? defaultColor,
        statusBarIconBrightness: androidIconBrightness,
        statusBarBrightness: brightness,
      ),
      child: Container(
        color: color ?? defaultColor,
        child: SafeArea(
          bottom: false,
          child: Container(
            child: child,
          ),
        ),
      ),
    );
  }
}

用法：将其放在页面小部件的顶部。

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

Answer 17

从颤振 2.5.0

AppBar 中不推荐使用brightness属性

我们需要使用， systemOverlayStyle属性

例如，如果您使用的是 AppBar

AppBar(
      title: Text("Title"),
      systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color

Answer 18

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

Answer 19

适用于 iOS 和 Android

import 'package:flutter/services.dart';

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

  return Scaffold();
}
    

Answer 20

使用 AnnotatedRegion 最适合我，尤其是在我没有 AppBar 的情况下

import 'package:flutter/services.dart';

...

Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}

Answer 21

您可以执行以下操作，

SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.grey.withOpacity(0.5),
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness:
            Platform.isAndroid ? Brightness.dark : Brightness.light,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarDividerColor: Colors.grey,
        systemNavigationBarIconBrightness: Brightness.dark,
      ),
    );

将此代码添加到您的 main.dart 构建方法中，

Answer 22

让它像你的应用栏颜色

import 'package:flutter/material.dart';

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

Answer 23

现有的解决方案都没有帮助我，因为我不使用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导入的。

Answer 24

用这种方式让你的状态栏完全变白，带有深色的状态栏图标，我个人使用它！ 在android上测试工作正常！

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          // This is the theme of your application.
          //
          // Try running your application with "flutter run". You'll see the
          // application has a blue toolbar. Then, without quitting the app, try
          // changing the primarySwatch below to Colors.green and then invoke
          // "hot reload" (press "r" in the console where you ran "flutter run",
          // or simply save your changes to "hot reload" in a Flutter IDE).
          // Notice that the counter didn't reset back to zero; the application
          // is not restarted.
          primarySwatch: Colors.blue,
          appBarTheme: AppBarTheme(
            color: Colors.white,
            elevation: 0,
            brightness: Brightness.light,
            centerTitle: true,
            iconTheme: IconThemeData(
              color: Colors.black,
            ),
            textTheme: TextTheme(),
          )

          // This makes the visual density adapt to the platform that you run
          // the app on. For desktop platforms, the controls will be smaller and
          // closer together (more dense) than on mobile platforms.
          ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.white,
    ));
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        actions: [
          Container(
            width: 63,
            padding: EdgeInsets.only(right: 30),
            child: FloatingActionButton(
              onPressed: null,
              backgroundColor: Colors.pink,
              elevation: 8,
              child: Icon(Icons.person_pin),
            ),
          )
        ],
      ),
    );
  }
}

Answer 25

这（在脚手架内）创建了一个带有浅色内容的黑色状态栏。 （没有应用栏）

appBar: AppBar(
      toolbarHeight: 0,
      backgroundColor: Colors.black,
      systemOverlayStyle: SystemUiOverlayStyle.light,
    ),

Answer 26

你也可以使用这个lib eazy和short flutter_statusbarcolor 0.2.0进行自定义

Answer 27

你可以用于安卓：

 import 'package:flutter/services.dart';

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

Answer 28

你也可以在 SliverAppBar 中使用它，不要忘记使用backwardsCompatibility: false如果你跳过这个属性它将不起作用。 另见文档

@override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: null,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
              systemOverlayStyle: SystemUiOverlayStyle(
                  statusBarColor: Colors.transparent,
                  statusBarIconBrightness: Brightness.dark),
              backwardsCompatibility: false,
//... remaining code and close braces..

Answer 29

完整示例

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.red, // navigation bar color
        systemNavigationBarIconBrightness: Brightness.light, //navigation bar icons' color
      ),
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: const Text('data'),
          systemOverlayStyle: SystemUiOverlayStyle.dark.copyWith(
            statusBarColor: Colors.red,
            statusBarIconBrightness: Brightness.light,
          ),
        ),
      ),
    );
  }
}

Answer 30

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

Answer 31

我对所有提到的答案都有问题，除了我自己做的解决方案： Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green) For视图，没有添加 appBar 我只是使用具有背景的容器，其高度与状态栏高度匹配。 在这种情况下，每个视图都可以有不同的状态颜色，我不需要担心和思考一些逻辑，即某种错误的视图具有某种错误的颜色。

Answer 32

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

Answer 33

首先，您要导入这一行：

import 'package:flutter/services.dart';

然后你可以在 main.dart 文件中使用下面这行代码

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
));

注意：如果你跟随这个陡峭的上方。 结果，您控制了所有屏幕。 但是如果你控制单个屏幕状态栏的颜色，那么你可以试试这个......

import 'package:flutter/services.dart';

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

Answer 34

您可以在没有 appbar 的情况下通过给脚手架（背景颜色：颜色）来更改它； 如果你用安全区包裹你的身体，问题可能就解决了。 我的意思是这个解决方案不是实践的，但如果你不使用 appbar，你可以通过这种方式实现。

Answer 35

在 Flutter 2.8 中：

AppBar(
    backgroundColor: YOUR_COLOR_HERE,
    toolbarHeight: 0,
);

Answer 36

似乎没有一个答案提到您可以使用主MaterialApp小部件中的ThemeData函数来完成此操作。

return MaterialApp(
  theme: ThemeData(
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.white,
      ),
    ),
  ),
),

这也可以在darkTheme ThemeData 中完成。

Answer 37

没有任何包裹的最佳方式

Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        toolbarHeight: 0,
        backgroundColor: Colors.transparent,
        elevation: 0,
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // <-- SEE HERE
          statusBarIconBrightness:
              Brightness.dark, //<-- For Android SEE HERE (dark icons)
          statusBarBrightness: Brightness.light,
        ),
      ),.......

Answer 38

最新解决方案。 Flutter 2.0及以上

对于那些使用 AppBar 的人：

/// WORKS on the screen where appBar is used
Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          // statusBarColor: Colors.red, // You can use this as well
          statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
          statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
        ),
      ),
     ), 

对于那些不使用 AppBar 的人：

1. 将下面的代码放在根屏幕的构建function 以影响以下所有屏幕：

void main() {
  runApp(MyApp());
}

// This widget is the root of your application.
class MyApp extends StatelessWidget {

  /// WORKS on every screen EXCEPT the screen in which appBar is used
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      // statusBarColor: Colors.red, // You can use this as well
      statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
      statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
    ),
  );
  @override
  Widget build(BuildContext context) {}
}

2. 将以下代码放在单个屏幕的构建function 上以仅影响此屏幕：

class SingleScreen extends StatelessWidget {

  /// WORKS on a single screen where appBar is NOT used
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      // statusBarColor: Colors.red, // You can use this as well
      statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
      statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
    ),
  );
  @override
  Widget build(BuildContext context) {}
}

Answer 39

尝试这个：

return MaterialApp(
    ...
    theme: ThemeData(
        primarySwatch: Colors.deepPurple
    ),
    ...
);

Answer 40

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

在主屏幕中：

返回脚手架（

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Answer 41

如果你想改变整个应用的状态颜色，你可以像这样使用 primaryColorDark 属性：

void main() {
  runApp(
    MaterialApp(
      home: HomeWidget(),
      theme: ThemeData(
        primaryColorDark: Colors.white,
      ),
    ),
  );
}

Answer 42

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