我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
你可以在Android上使用:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}
其他回答
这个也可以
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
我不能直接在帖子中评论,因为我还没有必要的声誉,但作者问了以下问题:
唯一的问题是背景是白色的,但时钟,无线和其他文本和图标也是白色的。我不知道为什么!!
对于任何来到这个帖子的人来说,这是对我有用的方法。状态栏的文本颜色由flutter/material.dart中的亮度常数决定。要改变这一点,调整SystemChrome解决方案,如下所示来配置文本:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.red,
statusBarBrightness: Brightness.dark,
));
亮度的可能值为亮度。黑暗和光明。
文档: https://api.flutter.dev/flutter/dart-ui/Brightness-class.html https://api.flutter.dev/flutter/services/SystemUiOverlayStyle-class.html
编辑为Flutter 2.0.0
当你在屏幕上有一个应用程序栏时,下面的答案就不再适用了。现在需要配置AppBarTheme。亮度和AppBarTheme。在这种情况下,systemOverlayStyle正确。
回答
而不是经常建议SystemChrome.setSystemUIOverlayStyle(),这是一个系统范围的服务,不会在不同的路由上重置,你可以使用AnnotatedRegion<SystemUiOverlayStyle>,这是一个小部件,只对你包装的小部件有效。
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
这招对我很管用:
进口服务
导入的包:颤振/ services.dart ';
然后添加:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return MaterialApp(home: Scaffold(
它可以通过两个步骤来实现:
使用FlutterStatusbarcolor包将状态栏颜色设置为与页面背景相匹配 使用AppBar设置状态栏按钮(电池,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()
}