我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
当您不使用AppBar时,更改状态栏的颜色
首先导入这个
import 'package:flutter/services.dart';
现在使用下面的代码改变状态栏的颜色在你的应用程序,当你不使用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. */
);
在iOS中使用安全区域时,更改状态栏的颜色
Scaffold(
body: Container(
color: Colors.red, /* Set your status bar color here */
child: SafeArea(child: Container(
/* Add your Widget here */
)),
),
);
其他回答
以下是你需要知道的一切:
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());
}
这是目前为止最好的方法,它不需要额外的插件。
Widget emptyAppBar(){
return PreferredSize(
preferredSize: Size.fromHeight(0.0),
child: AppBar(
backgroundColor: Color(0xFFf7f7f7),
brightness: Brightness.light,
)
);
}
在你的刑台上像这样叫它
return Scaffold(
appBar: emptyAppBar(),
.
.
.
大多数答案都是使用只适用于安卓系统的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 */,
);
}
现有的解决方案对我没有帮助,因为我不使用AppBar,而且我不想在用户切换应用程序主题时做出声明。我需要一种反应式的方式来切换亮暗模式,发现AppBar使用了一个名为Semantics的小部件来设置状态栏的颜色。
基本上,我是这样做的:
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
),
);
语义从package:flutter/material.dart导入。 SystemUiOverlayStyle从package:flutter/services.dart导入。
我通过改变整个背景颜色来解决这个问题,如下所示:
在主界面:
return Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
),
);