我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
你可以改变它没有appbar给脚手架(backgroundColor: color);如果你把身体包裹起来,问题可能就解决了。我的意思是这个解决方案不是实践,但如果你不使用appbar,你可以用这种方式实现。
其他回答
大多数答案都是使用只适用于安卓系统的SystemChrome。我的解决方案是将AnnotatedRegion和SafeArea合并到新的小部件中,这样它也可以在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 */,
);
}
你也可以在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..
它可以通过两个步骤来实现:
使用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()
}
最好的办法就是不用包装
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,
),
),.......
[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());
}