[英]Icon's color in status bar (Flutter)
I was working with FLUTTER and the Design refers to black color for the status bar and the icon's color of the status bar must be white so how can I change statusbar icon's color in flutter?我正在使用 FLUTTER,设计指的是状态栏的黑色,状态栏的图标颜色必须是白色,那么如何在 flutter 中更改状态栏图标的颜色?
Add the Snippet below to your main.dart
.将下面的代码段添加到您的
main.dart
。 setSystemUIOverlayStyle
allows one to change System overlay styles if any. setSystemUIOverlayStyle
允许更改系统覆盖样式(如果有)。 This will do the job globally in your app.这将在您的应用程序中全局完成工作。
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark));
This will give you the effect below(iOS & Android).这将为您提供以下效果(iOS 和 Android)。 Play around with the properties in
SystemUiOverlayStyle
to get what you want.使用
SystemUiOverlayStyle
的属性来获得你想要的。
To change the icon
to white try the following inside the build
method:要将
icon
更改为白色,请尝试在build
方法中执行以下操作:
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
FlutterStatusbarcolor.setStatusBarColor(Colors.white);
FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
...
}
The method setStatusBarWhiteForeground
will change the color of the text and icon to white if it is set to true otherwise the color will be black.如果
setStatusBarWhiteForeground
方法设置为 true,则该方法setStatusBarWhiteForeground
文本和图标的颜色更改为白色,否则颜色将为黑色。
more information here: https://github.com/mchome/flutter_statusbarcolor/blob/master/lib/flutter_statusbarcolor.dart#L29更多信息: https : //github.com/mchome/flutter_statusbarcolor/blob/master/lib/flutter_statusbarcolor.dart#L29
Add this snippet in lib/main.dart
file.将此代码段添加到
lib/main.dart
文件中。
class App extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// This code changes background color and icon color of status bar
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
// statusBarColor is used to set Status bar color in Android devices.
statusBarColor: Colors.transparent,
// To make Status bar icons color white in Android devices.
statusBarIconBrightness: Brightness.light,
// statusBarBrightness is used to set Status bar icon color in iOS.
statusBarBrightness: Brightness.dark,
// Here light means dark icon color for Status bar.
));
// material app widget
return MaterialApp(
// Status bar color
theme: ThemeData(
appBarTheme: AppBarTheme(
// Brightness.dark will show white color icon
brightness: Brightness.dark,
),
),
color: Colors.white,
title: 'App',
home: Scaffold(),
);
}
}
Update:更新:
Use AppBar.systemOverlayStyle
:使用
AppBar.systemOverlayStyle
:
AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarBrightness: Brightness.dark, // For iOS: (light icons)
statusBarIconBrightness: Brightness.dark, // For Android: (dark icons)
statusBarColor: ...,
),
)
From Flutter 2.4 onwards, you have to set the style directly, so:从Flutter 2.4开始,要直接设置style,所以:
AppBar(
systemOverlayStyle: SystemUiOverlayStyle.dark,
)
This code works for Android and iOS.此代码适用于 Android 和 iOS。
I know I am late but for those who face the same issue我知道我迟到了,但对于那些面临同样问题的人
Add the following code to main.dart
in the MaterialApp()
theme property在
MaterialApp()
主题属性中的main.dart
添加如下代码
MaterialApp(
theme: ThemeData(
appBarTheme: AppBarTheme(
systemOverlayStyle: const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.dark, // For iOS: (dark icons)
statusBarIconBrightness: Brightness.dark, // For Android(M and greater): (dark icons)
))),
);
Noting that Brightness.dark
provide dark icons and that's suitable for white background in black background case of course Brightness.light
注意到
Brightness.dark
提供深色图标,这当然适用于黑色背景情况下的白色背景Brightness.light
Set to [Brightness.light], the system bar icons are white.
设置为【Brightness.light】,系统栏图标为白色。
Set to [Brightness.dark], the system bar icons are black.
设置为【亮度.暗】,系统栏图标为黑色。
That will work globally in your app这将在您的应用程序中全局运行
If you want it for a specific page, there's a property in AppBar()
called systemOverlayStyle:
copy the same code above to it如果你想要它用于特定页面,
AppBar()
中有一个名为systemOverlayStyle:
将上面的相同代码复制到它
AppBar(
systemOverlayStyle: const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.dark, // For iOS: (dark icons)
statusBarIconBrightness: Brightness.dark, // For Android(M and greater): (dark icons)
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.