我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
最新的解决方案。Flutter 2.0及以上
对于使用AppBar的用户:
/// WORKS on the screen where appBar is used
Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
// statusBarColor: Colors.red, // You can use this as well
statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
),
),
),
对于那些不使用AppBar的人:
将下面的代码放在根屏幕的构建功能上,以影响下面的所有屏幕:
void main() {
runApp(MyApp());
}
// This widget is the root of your application.
class MyApp extends StatelessWidget {
/// WORKS on every screen EXCEPT the screen in which appBar is used
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
// statusBarColor: Colors.red, // You can use this as well
statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
),
);
@override
Widget build(BuildContext context) {}
}
将下面的代码放在单个屏幕的构建功能上,只影响该屏幕:
class SingleScreen extends StatelessWidget {
/// WORKS on a single screen where appBar is NOT used
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(
// statusBarColor: Colors.red, // You can use this as well
statusBarIconBrightness: Brightness.dark, // OR Vice Versa for ThemeMode.dark
statusBarBrightness: Brightness.light, // OR Vice Versa for ThemeMode.dark
),
);
@override
Widget build(BuildContext context) {}
}
其他回答
编辑为Flutter 2.0.0
当你在屏幕上有一个应用程序栏时,下面的答案就不再适用了。现在需要配置AppBarTheme。亮度和AppBarTheme。在这种情况下,systemOverlayStyle正确。
回答
而不是经常建议SystemChrome.setSystemUIOverlayStyle(),这是一个系统范围的服务,不会在不同的路由上重置,你可以使用AnnotatedRegion<SystemUiOverlayStyle>,这是一个小部件,只对你包装的小部件有效。
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
我对所有提到的答案都有问题,除了我自己做的解决方案:容器(宽度:MediaQuery.of(context).size。MediaQuery.of(context).padding. width, height:上衣,颜色:颜色。绿色) 对于视图,哪里没有appBar添加我只是使用容器的背景,准确的高度匹配状态栏的高度。在这个场景中,每个视图可以有不同的状态颜色,我不需要担心和思考一些逻辑,某种错误的视图有某种错误的颜色。
你可以改变它没有appbar给脚手架(backgroundColor: color);如果你把身体包裹起来,问题可能就解决了。我的意思是这个解决方案不是实践,但如果你不使用appbar,你可以用这种方式实现。
当您不使用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 */
)),
),
);
这个也可以
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);