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

Question

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

Answer 1

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

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

(this package)

更新： 推荐方案（Flutter 2.0及以上）

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

Answer 2

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

Answer 3

在 main.dart 文件上导入服务如关注

  import 'package:flutter/services.dart';

在构建方法中只需在 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 4

由于我还没有必要的声誉，我不能直接在主题中发表评论，但作者提出了以下问题：

the only issue is that the background is white but the clock, wireless and other text and icons are also in white .. I am not sure why!!

对于来到此主题的任何其他人，以下是对我有用的方法。状态栏的文字颜色由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 5

让它像你的应用栏颜色

import 'package:flutter/material.dart';

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

Answer 6

对于那些使用`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(...),
);

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 2.0.0 编辑

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

回答

而不是经常建议的 SystemChrome.setSystemUIOverlayStyle() 这是一个系统范围的服务并且不会在不同的路线上重置，您可以使用 AnnotatedRegion<SystemUiOverlayStyle> 这是一个小部件并且只对小部件有效你包起来。

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

Answer 9

这个也行

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

Answer 10

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

Answer 11

这对我有用：

导入服务

import 'package:flutter/services.dart';

然后添加：

@override
  Widget build(BuildContext context) {

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

Answer 12

Change status bar color when you are not using 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. */
);

To change the status bar color in iOS when you are using SafeArea

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

Answer 13

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

Answer 14

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

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

这就是您需要知道的一切：

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 17

分两步实现：

使用 FlutterStatusbarcolor package
使用 AppBar.brightness 属性

如果你有 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 18

None 的现有解决方案帮助了我，因为我不使用 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 19

适用于 iOS 和 Android

import 'package:flutter/services.dart';

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

  return Scaffold();
}

Answer 20

我通过改变整个背景颜色解决了这个问题，如下所示：

在主屏幕中：

return脚手架(

  backgroundColor: Colors.black,

  body: SafeArea(
  
 ),

);

Answer 21

大多数答案都使用 SystemChrome，它仅适用于 Android。我的解决方案是将 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 22

首先你要导入这一行：

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 23

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

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

Answer 24

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

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

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

Answer 25

[在 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 26

使用这种方式让你的状态栏完全变白，状态栏图标变暗，我个人用的！在 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 27

你可以在没有 appbar 的情况下通过给脚手架(backgroundColor: color);如果你用 safearea 包装你的 body，问题可能就解决了。我的意思是这个解决方案不是实践，但如果你不使用 appbar，你可以通过这种方式实现。

Answer 28

您可以用于 Android:

 import 'package:flutter/services.dart';

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

Answer 29

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

@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 30

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

import 'package:flutter/services.dart';

...

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

Answer 31

Full example

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 32

来自 Flutter 2.5.0

brightness 属性在 AppBar

中已弃用

我们需要使用，systemOverlayStyle属性

例如，如果您使用的是 AppBar

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

Answer 33

您可以进行如下操作，

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 34

在 Flutter 2.8 中：

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

Answer 35

None 的答案似乎提到您可以使用主 MaterialApp 小部件中的 ThemeData 功能来完成。

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

这也可以在 darkTheme ThemeData 中完成。

Answer 36

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

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

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

How to change status bar color in Flutter?

dart

flutter

flutter-dependencies

flutter-layout

更新 Flutter 2.0（推荐）：

对于那些使用`AppBar`

对于那些不使用的人 `AppBar`

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

How to change status bar color in Flutter?

dart

flutter

flutter-dependencies

flutter-layout

更新 Flutter 2.0（推荐）：

对于那些使用AppBar

对于那些不使用的人 AppBar

对于那些使用`AppBar`

对于那些不使用的人 `AppBar`