[英]How to change status bar color in Flutter?
On latest Flutter version, you should use:在最新的 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)
),
)
Only Android (more flexibility):仅 Android(更灵活):
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
Both iOS and Android: iOS和Android:
appBar: AppBar(
backgroundColor: Colors.red, // Status bar color
)
A bit hacky but works on both iOS and Android:有点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
),
),
),
)
Works totally fine in my app在我的应用程序中工作得很好
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 ) (这个包)
UPD: Recommended solution (Flutter 2.0 and above) UPD:推荐解决方案(Flutter 2.0 及更高版本)
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white
));
AppBar
对于那些使用AppBar
的人If you use AppBar
then updating status bar color is as simple as this:如果您使用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: ...
)
To apply for all app bars:申请所有应用栏:
return MaterialApp(
theme: Theme.of(context).copyWith(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(brightness: Brightness.light),
...
),
AppBar
对于那些不使用AppBar
的人Wrap your content with AnnotatedRegion
and set value
to SystemUiOverlayStyle.light
or SystemUiOverlayStyle.dark
:使用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(...),
);
Edit for Flutter 2.0.0编辑 Flutter 2.0.0
The answer below does not work anymore when you have an AppBar
on the screen.当屏幕上有AppBar
时,下面的答案不再起作用。 You now need to configure the AppBarTheme.brightness
and AppBarTheme.systemOverlayStyle
correctly in that case.在这种情况下,您现在需要正确配置AppBarTheme.brightness
和AppBarTheme.systemOverlayStyle
。
Answer回答
Instead of the often suggested SystemChrome.setSystemUIOverlayStyle()
which is a system wide service and does not reset on a different route, you can use an AnnotatedRegion<SystemUiOverlayStyle>
which is a widget and only has effect for the widget that you wrap.您可以使用AnnotatedRegion<SystemUiOverlayStyle>
作为小部件并且仅对您包装的小部件有效,而不是经常建议的SystemChrome.setSystemUIOverlayStyle()
,它是系统范围的服务并且不会在不同的路由上重置。
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
This worked for me:这对我有用:
Import Service进口服务
import 'package:flutter/services.dart';
Then add:然后加:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return MaterialApp(home: Scaffold(
Change status bar color when you are not using
AppBar
不使用AppBar
时更改状态栏颜色
First Import this首先导入这个
import 'package:flutter/services.dart';
Now use below code to change status bar color in your application when you are not using the AppBar
现在,当您不使用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 usingSafeArea
使用SafeArea
时更改iOS
中的状态栏颜色
Scaffold(
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(child: Container(
/* Add your Widget here */
)),
),
);
I think this will help you:我认为这会帮助你:
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
));
I can't comment directly in the thread since I don't have the requisite reputation yet, but the author asked the following:由于我还没有必要的声誉,因此我无法直接在线程中发表评论,但作者提出了以下问题:
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!!唯一的问题是背景是白色的,但时钟、无线和其他文本和图标也是白色的..我不知道为什么!!
For anyone else who comes to this thread, here's what worked for me.对于任何来到这个线程的人,这对我有用。 The text color of the status bar is decided by the Brightness constant in flutter/material.dart
.状态栏的文本颜色由flutter/material.dart
中的 Brightness 常数决定。 To change this, adjust the SystemChrome
solution like so to configure the text:要更改这一点,请调整SystemChrome
解决方案,如下所示配置文本:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
statusBarBrightness: Brightness.dark,
));
Your possible values for Brightness
are Brightness.dark
and Brightness.light
.您的Brightness
可能值为Brightness.dark
和Brightness.light
。
Documentation: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html文档: https ://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html
This is everything you need to know:这是您需要知道的一切:
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());
}
What worked for me (For those who don't use AppBar)什么对我有用(对于那些不使用 AppBar 的人)
Add AppbBar with preferred color and then set : toolbarHeight: 0添加具有首选颜色的 AppbBar,然后设置: toolbarHeight:0
child: Scaffold(
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.blue,
brightness: Brightness.light,
)
It can be achieved in 2 steps:它可以通过2个步骤来实现:
AppBar.brightness
property使用AppBar.brightness
属性设置状态栏按钮(电池、wifi 等)的颜色If you have an AppBar
:如果你有一个AppBar
:
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
return Scaffold(
appBar: AppBar(
brightness: Brightness.light,
// Other AppBar properties
),
body: Container()
);
}
If you don't want to show the app bar in the page:如果您不想在页面中显示应用栏:
@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()
}
[Tested in Android] This is how I was able to make status bar transparent and it's text color dark, [在 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());
}
on the main.dart file import service like follow在 main.dart 文件导入服务上,如下所示
import 'package:flutter/services.dart';
and inside build method just add this line before return并且在 build 方法中只需在 return 之前添加这一行
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.orange
));
Like this:像这样:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: CustomColors.appbarcolor
));
return MaterialApp(
home: MySplash(),
theme: ThemeData(
brightness: Brightness.light,
primaryColor: CustomColors.appbarcolor,
),
);
}
This one will also work这个也可以
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
This is by far is the best way, it requires no extra plugins.这是迄今为止最好的方法,它不需要额外的插件。
Widget emptyAppBar(){
return PreferredSize(
preferredSize: Size.fromHeight(0.0),
child: AppBar(
backgroundColor: Color(0xFFf7f7f7),
brightness: Brightness.light,
)
);
}
and call it in your scaffold like this并像这样在你的脚手架中调用它
return Scaffold(
appBar: emptyAppBar(),
.
.
.
Most of the answers are using SystemChrome
which only works for Android.大多数答案都是使用仅适用于 Android 的SystemChrome
。 My solution is to combine both AnnotatedRegion
and SafeArea
into new Widget so it also works in iOS.我的解决方案是将AnnotatedRegion
和SafeArea
合并到新的 Widget 中,这样它也可以在 iOS 中使用。 And I can use it with or without AppBar
.我可以在有或没有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,
),
),
),
);
}
}
Usage: Place it to top of page's widget.用法:将其放在页面小部件的顶部。
@override
Widget build(BuildContext context) {
return ColoredStatusBar(
child: /* your child here */,
);
}
From Flutter 2.5.0从颤振 2.5.0
brightness
property is deprecated in AppBar AppBar 中不推荐使用brightness
属性
We need to use, systemOverlayStyle
property我们需要使用, systemOverlayStyle
属性
Example,If you are using an AppBar例如,如果您使用的是 AppBar
AppBar(
title: Text("Title"),
systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color
return Scaffold(
backgroundColor: STATUS_BAR_COLOR_HERE,
body: SafeArea(
child: scaffoldBody(),
),
);
Works for both iOS and Android适用于 iOS 和 Android
import 'package:flutter/services.dart';
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return Scaffold();
}
Using AnnotatedRegion is what works best for me, especially if I don't have an AppBar使用 AnnotatedRegion 最适合我,尤其是在我没有 AppBar 的情况下
import 'package:flutter/services.dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
You can do as follows,您可以执行以下操作,
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,
),
);
Add this code to your main.dart build method,将此代码添加到您的 main.dart 构建方法中,
to Make it Like your App Bar Color让它像你的应用栏颜色
import 'package:flutter/material.dart';
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
));
}
None of the existing solutions helped me, because I don't use AppBar
and I don't want to make statements whenever the user switches the app theme.现有的解决方案都没有帮助我,因为我不使用AppBar
并且我不想在用户切换应用程序主题时发表声明。 I needed a reactive way to switch between the light and dark modes and found that AppBar
uses a widget called Semantics
for setting the status bar color.我需要一种反应方式来在明暗模式之间切换,并发现AppBar
使用一个名为Semantics
的小部件来设置状态栏颜色。
Basically, this is how I do it:基本上,这就是我的做法:
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
is imported from package:flutter/material.dart
. Semantics
是从package:flutter/material.dart
导入的。SystemUiOverlayStyle
is imported from package:flutter/services.dart
. SystemUiOverlayStyle
是从package:flutter/services.dart
导入的。Use this way to make your status bar completely white with the dark status bar icons, I use it personally!用这种方式让你的状态栏完全变白,带有深色的状态栏图标,我个人使用它! tested on android worked fine!在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),
),
)
],
),
);
}
}
this (inside the scaffold) creates a black statusbar with light content.这(在脚手架内)创建了一个带有浅色内容的黑色状态栏。 (no Appbar) (没有应用栏)
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.black,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
你也可以使用这个lib eazy和short flutter_statusbarcolor 0.2.0进行自定义
you can use for Android:你可以用于安卓:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
you can also use this in SliverAppBar, don't forget to use backwardsCompatibility: false
it would not work if you skip this property.你也可以在 SliverAppBar 中使用它,不要忘记使用backwardsCompatibility: false
如果你跳过这个属性它将不起作用。 also see 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..
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,
),
),
),
);
}
}
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(brightness: Brightness.dark),
child: Scaffold()
....
)
}
I had issues with all mentioned answers, except with solution i did myself: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green)
For views, where is no appBar added i just use container with background which exact height matches status bar height.我对所有提到的答案都有问题,除了我自己做的解决方案: Container(width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).padding.top, color: Colors.green)
For视图,没有添加 appBar 我只是使用具有背景的容器,其高度与状态栏高度匹配。 In this scenario each view can have different status color and i don't need to worry and think about some logic, that somehow wrong views has somehow wrong colors.在这种情况下,每个视图都可以有不同的状态颜色,我不需要担心和思考一些逻辑,即某种错误的视图具有某种错误的颜色。
First of all you are import this line:首先,您要导入这一行:
import 'package:flutter/services.dart';
Then You can use bellow this some line of code in main.dart file然后你可以在 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
));
Note: If you follow above this steep.注意:如果你跟随这个陡峭的上方。 as a result you control all of screen.结果,您控制了所有屏幕。 But if you control individual screen status bar color then you can try this ...但是如果你控制单个屏幕状态栏的颜色,那么你可以试试这个......
import 'package:flutter/services.dart';
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.transparent,
));
}
You can change it without appbar with giving scaffold(backgroundColor: color);您可以在没有 appbar 的情况下通过给脚手架(背景颜色:颜色)来更改它; and if you wrap your body with safearea, problem probably solved.如果你用安全区包裹你的身体,问题可能就解决了。 I mean this solution is not practice but if you are not using appbar, you can achive with this way.我的意思是这个解决方案不是实践的,但如果你不使用 appbar,你可以通过这种方式实现。
At Flutter 2.8:在 Flutter 2.8 中:
AppBar(
backgroundColor: YOUR_COLOR_HERE,
toolbarHeight: 0,
);
None of the answers seem to mention that you can do it with your ThemeData
function in your main MaterialApp
widget.似乎没有一个答案提到您可以使用主MaterialApp
小部件中的ThemeData
函数来完成此操作。
return MaterialApp(
theme: ThemeData(
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
),
),
),
This can also be done in the darkTheme
ThemeData.这也可以在darkTheme
ThemeData 中完成。
The best way with out any packages没有任何包裹的最佳方式
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,
),
),.......
Latest solution.最新解决方案。 Flutter 2.0 and above Flutter 2.0及以上
For those who use AppBar:对于那些使用 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
),
),
),
For those who DON'T use AppBar:对于那些不使用 AppBar 的人:
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) {}
}
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) {}
}
try this: 尝试这个:
return MaterialApp(
...
theme: ThemeData(
primarySwatch: Colors.deepPurple
),
...
);
I solved it by change the whole background color like following:我通过改变整个背景颜色来解决它,如下所示:
In the main screen:在主屏幕中:
return Scaffold(返回脚手架(
backgroundColor: Colors.black,
body: SafeArea(
),
); );
If you want to change the status color for the whole app, you can use the primaryColorDark property like this:如果你想改变整个应用的状态颜色,你可以像这样使用 primaryColorDark 属性:
void main() {
runApp(
MaterialApp(
home: HomeWidget(),
theme: ThemeData(
primaryColorDark: Colors.white,
),
),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.