【发布时间】：2023-03-05 06:25:01
【问题描述】：
我正在尝试将状态栏颜色更改为白色。我在 Flutter 上找到了 this pub。我尝试在我的 dart 文件中使用示例代码。
【问题讨论】：
-
在 iOS 上，您可以简单地将脚手架主体包裹在安全区域。您设置为脚手架背景颜色的颜色将成为状态栏颜色。
标签： dart flutter flutter-layout flutter-dependencies
【发布时间】：2023-03-05 06:25:01
【问题描述】：
更新 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
),
),
),
)
【讨论】：
-
我是 Flutter 的新手，我想知道如果我们将这些行放在任何小部件的构建方法中会怎样？有什么区别吗？
-
它会起作用并且没有任何区别。请记住，颜色将使用最新调用者的参数设置。
-
如何在将应用主题从浅色更改为深色时更改状态栏文本颜色，反之亦然？ ThemeData 类中是否有任何属性？
-
@VinothVino 抱歉，您不能为状态栏项目提供您选择的文本颜色，您所能做的就是更改
brightness，其中Brightness.light显示黑色文本颜色，Brightness.dark显示白色。 -
@JayTillu 您可以将
statusBarBrightness属性传递给SystemUiOverlayStyle构造函数。
在我的应用中运行良好
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),
);
}
}
统一更新： 推荐方案（Flutter 2.0及以上）
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white
));
【讨论】：
-
非常感谢安德烈；它有效......唯一的问题是背景是白色的，但时钟、无线和其他文本和图标也是白色的......我不知道为什么！！ （我希望文本和图标为黑色）
-
我也没有找到这个。而且我已经编辑了帖子 - 还有另一种更简单的设置状态栏颜色的解决方案
-
优秀。只是一点评论...您必须打开 pubspec.yaml 文件并在 dependencies 行下添加下一行：flutter_statusbarcolor: ^0.2.3（在此处查看最新版本 [pub.dev/packages/flutter_statusbarcolor#-installing-tab-]）
-
它改变状态栏的背景，而不是状态栏本身的文本。
-
@AbdulrahmanMasoud 问题是关于状态栏颜色，而不是文本
对于那些使用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(...),
);
【讨论】：
-
此方法不允许设置准确的颜色
-
如果你想根据你的主题获取状态栏颜色，你可以随时使用
brightness: Theme.of(context).brightness -
value: SystemUiOverlayStyle.light（或.dark）做同样的事情 -
如果我们不想更改状态栏颜色并由设备系统设置为默认值怎么办。在这种情况下我们应该怎么做？
-
那就什么都别做
为 Flutter 2.0.0 编辑
当您在屏幕上显示AppBar 时，以下答案不再有效。在这种情况下，您现在需要正确配置AppBarTheme.brightness 和AppBarTheme.systemOverlayStyle。
回答
您可以使用AnnotatedRegion<SystemUiOverlayStyle>，而不是经常建议的SystemChrome.setSystemUIOverlayStyle()，它是一个系统范围的服务并且不会在不同的路由上重置，它是一个小部件，仅对您包装的小部件有效。
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
【讨论】：
-
这是最好的答案，因为按下后弹回屏幕会重置状态栏。这是 Jordy 在这里首次提到的 stackoverflow.com/a/54593164/4033525
-
如果我们在整个应用程序中都需要它，我也相信这是最好的答案
-
我在一个屏幕上使用它，它对应用程序中的所有其他屏幕都有影响。我在我的第一个屏幕上使用它，自然而然地连接了其他屏幕，因此它在所有其他屏幕上具有相同的状态栏颜色，在这个白色中。如何防止这种行为？如何让它只在特定的脚手架上工作？
-
@gegobyte 我有同样的问题。我所做的是使用 1 种全局颜色，大多数视图都使用这种颜色。但是在需要不同颜色的特定视图中，我只是重复使用相同的小部件但颜色不同
-
最好的答案应该改为
这对我有用：
进口服务
import 'package:flutter/services.dart';
然后添加：
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return MaterialApp(home: Scaffold(
【讨论】：
-
如果设备上的深色主题处于活动状态怎么办？我们可以动态更改状态栏颜色吗？
-
这已经过时了
不使用时更改状态栏颜色
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. */
);
在您使用
时更改SafeAreaiOS中的状态栏颜色
Scaffold(
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(child: Container(
/* Add your Widget here */
)),
),
);
【讨论】：
-
我把 SafeArea 放在脚手架之前，这会阻止脚手架的背景颜色延伸到状态栏后面。
我认为这会对你有所帮助：
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
));
【讨论】：
由于我还没有必要的声誉，因此我无法直接在线程中发表评论，但作者提出以下问题：
唯一的问题是背景是白色的，但时钟、无线和其他文本和图标也是白色的..我不知道为什么！！
对于任何来到此线程的其他人，这对我有用。状态栏的文本颜色由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
【讨论】：
这是你需要知道的一切：
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());
}
【讨论】：
分两步实现：
- 使用FlutterStatusbarcolor package 设置状态栏颜色以匹配您的页面背景
- 使用
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()
}
【讨论】：
-
这也在 ios 中针对 SafeArea 进行了测试？
什么对我有用（对于那些不使用 AppBar 的人）
使用首选颜色添加 AppbBar，然后设置：toolbarHeight: 0
child: Scaffold(
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.blue,
brightness: Brightness.light,
)
【讨论】：
在 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,
),
);
}
【讨论】：
这是迄今为止最好的方法，它不需要额外的插件。
Widget emptyAppBar(){
return PreferredSize(
preferredSize: Size.fromHeight(0.0),
child: AppBar(
backgroundColor: Color(0xFFf7f7f7),
brightness: Brightness.light,
)
);
}
并像这样在你的脚手架中调用它
return Scaffold(
appBar: emptyAppBar(),
.
.
.
【讨论】：
[在 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());
}
【讨论】：
来自 Flutter 2.5.0
brightness 属性在 AppBar 中已弃用
我们需要使用systemOverlayStyle属性
例如，如果您使用的是 AppBar
AppBar(
title: Text("Title"),
systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color
【讨论】：
-
谢谢你没有其他工作。这是 Flutter 2.5.0 中唯一有效的方法
-
我现在用的是Flutter 2.5.2，这个不行。我发现``` SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light); ``` 是让它在 iOS 上工作的正确方法
这个也可以
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
【讨论】：
适用于 iOS 和 Android
import 'package:flutter/services.dart';
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return Scaffold();
}
【讨论】：
大多数答案都使用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 */,
);
}
【讨论】：
-
谢谢伙计，这很好用，只是隐藏了调试标签的一部分，但我猜没关系。
让它像你的应用栏颜色
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
));
}
【讨论】：
return Scaffold(
backgroundColor: STATUS_BAR_COLOR_HERE,
body: SafeArea(
child: scaffoldBody(),
),
);
【讨论】：
现有的解决方案都没有帮助我，因为我不使用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导入的。
【讨论】：
-
面临与上述相同的问题，但解决方案在 Andorid 10 中不起作用
使用这种方式使您的状态栏完全变白，并带有深色状态栏图标， 我个人使用它！在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),
),
)
],
),
);
}
}
【讨论】：
使用 AnnotatedRegion 最适合我，尤其是在我没有 AppBar 的情况下
import 'package:flutter/services.dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
【讨论】：
-
抄袭自here。
你可以这样做，
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 构建方法中，
【讨论】：
您可以用于 Android：
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
【讨论】：
-
这个在小部件内部工作，只需将小部件放在构建方法之上。
你也可以在 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..
【讨论】：
-
谢谢，效果很好！
完整示例
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,
),
),
),
);
}
}
【讨论】：
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(brightness: Brightness.dark),
child: Scaffold()
....
)
}
【讨论】：
-
请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。
我对所有提到的答案都有问题，除了我自己做的解决方案：Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green)
对于视图，没有添加 appBar，我只使用具有背景的容器，其高度与状态栏高度匹配。在这种情况下，每个视图都可以有不同的状态颜色，我不需要担心和思考一些逻辑，即某种错误的视图具有某种错误的颜色。
【讨论】：
首先你要导入这一行：
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,
));
}
【讨论】：