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

Question

我正在尝试将状态栏颜色更改为白色。我发现这家酒吧在https://pub.dartlang.org/packages/flutter_statusbarcolor上步步高升。我试图在我的dart文件（主要文件和其他文件）上使用示例代码。

Answer 1

您可以使用SystemChrome.setSystemUIOverlayStyle()（这是一个小部件，仅对您所使用的小部件有效）来代替通常建议的AnnotatedRegion<SystemUiOverlayStyle>（这是系统范围的服务，并且不会在其他路由上重置）。包裹。

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

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： 另一个解决方案

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

Answer 3

您可以使用SystemChrome类来更改状态栏和导航栏的颜色。 首次导入

import 'package:flutter/services.dart';

此后，您需要添加以下几行（放置这些行的更好的位置是您的main()方法中）

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

Answer 4

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

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

的用户

如果您使用AppBar，则更新状态栏颜色非常简单：

Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    // Use Brightness.light for dark status bar 
    // or Brightness.dark for light status bar
    brightness: Brightness.light 
  ),
  body: ...
)

Answer 7

这是您需要了解的一切：

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 8

可以通过两个步骤实现：

1. 使用FlutterStatusbarcolor package
设置状态栏颜色以使其与页面背景匹配
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 9

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

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

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

Answer 10

由于我尚不具备必要的声誉，因此我无法在线程中直接发表评论，但是作者提出以下要求：

  

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

对于使用此主题的其他人，这对我有用。状态栏的文本颜色由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

Answer 11

使用这种方式使您的状态栏完全变白并带有深色状态栏图标， 我个人使用！在 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 12

这也将起作用

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

Answer 13

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

Answer 14

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

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

像这样在您的支架中调用它

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

Answer 15

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

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 16

您也可以使用此lib进行自定义 轻松又简短 flutter_statusbarcolor 0.2.0

Answer 17

你可以用于安卓：

 import 'package:flutter/services.dart';

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

Answer 18

首先你要导入这一行：

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 19

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

Answer 20

大多数答案都使用仅适用于 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 21

你可以在没有appbar的情况下通过提供scaffold(backgroundColor: color)来改变它；如果你用安全区包裹你的身体，问题可能就解决了。我的意思是这个解决方案不是实践，但如果你不使用 appbar，你可以通过这种方式实现。

Answer 22

您也可以在 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 23

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

在主屏幕中：

返回脚手架（

import requests
import pandas as pd

r = requests.get("https://www2.daad.de/deutschland/studienangebote/international-programmes/api/solr/en/search.json?cert=&admReq=&scholarshipLC=&scholarshipSC=&fos=&langDeAvailable=&langEnAvailable=&sort=4&q=&limit=2099&offset=&display=list&isSep=").json()

course_type_mapping = {
    "1": "Bachelor's degree",
    "2": "Master's degree",
    "3": "PhD/Doctorate",
    "4": "Cross-faculty graduate and research school",
    "5": "Prep course",
    "6": "Language course",
    "7": "Short course",
    "8": "Study online"
}

data = [
    "link", "courseName", "courseType", "academy", "city", "languages",
    "programmeDuration", "beginning", "subject", "tuitionFees", "image",
    "dateString",
]
d = []
for item in r["courses"]:
    d.append([item[x] for x in data])

df = pd.DataFrame(*[d], columns=data)
df['courseType'] = df['courseType'].apply(lambda x: course_type_mapping.get(str(x), "N/A"))
df.to_csv("data.csv", index=False)

）;

Answer 24

适用于iOS和Android

import 'package:flutter/services.dart';

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

  return Scaffold();
}
    

Answer 25

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

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

Answer 27

尝试一下：

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

Answer 28

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

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

Answer 29

我认为这会对您有所帮助

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 30

使其像您的应用栏颜色

import 'package:flutter/material.dart';

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

Answer 31

在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(
    debugShowCheckedModeBanner: false,
    home: MySplash(),
    theme: ThemeData(
      brightness: Brightness.light,
      fontFamily: "VarelaRound",
      primaryColor: CustomColors.appbarcolor,
    ),
  );
 }

Answer 32

您想要的是主题。它们比AppBar的颜色重要得多。

https://flutter.io/cookbook/design/themes/