我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
[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());
}
其他回答
这(在脚手架内部)创建了一个带有浅色内容的黑色状态栏。(没有Appbar)
appBar: AppBar(
toolbarHeight: 0,
backgroundColor: Colors.black,
systemOverlayStyle: SystemUiOverlayStyle.light,
),
从Flutter 2.5.0
AppBar中的亮度属性已弃用
我们需要使用systemOverlayStyle属性
例如,如果您正在使用AppBar
AppBar(
title: Text("Title"),
systemOverlayStyle: SystemUiOverlayStyle.dark) //for dark color
更新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
),
),
),
)
对于那些使用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包装您的内容,并将值设置为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(...),
);
它可以通过两个步骤来实现:
使用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()
}