我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
我认为这对你有帮助:
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.white, // navigation bar color
statusBarColor: Colors.white, // status bar color
statusBarIconBrightness: Brightness.dark, // status bar icons' color
systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
));
其他回答
最新的解决方案。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) {}
}
在主要的。飞镖文件 导入服务如下
import 'package:flutter/services.dart';
在build方法中,在返回之前添加这一行
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.orange
));
是这样的:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: CustomColors.appbarcolor
));
return MaterialApp(
home: MySplash(),
theme: ThemeData(
brightness: Brightness.light,
primaryColor: CustomColors.appbarcolor,
),
);
}
[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());
}
更新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
),
),
),
)
这招对我很管用:
进口服务
导入的包:颤振/ services.dart ';
然后添加:
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarBrightness: Brightness.dark,
));
return MaterialApp(home: Scaffold(