我正在尝试改变状态栏的颜色为白色。我偶然发现了这家酒吧。我尝试在我的dart文件中使用示例代码。
当前回答
编辑为Flutter 2.0.0
当你在屏幕上有一个应用程序栏时,下面的答案就不再适用了。现在需要配置AppBarTheme。亮度和AppBarTheme。在这种情况下,systemOverlayStyle正确。
回答
而不是经常建议SystemChrome.setSystemUIOverlayStyle(),这是一个系统范围的服务,不会在不同的路由上重置,你可以使用AnnotatedRegion<SystemUiOverlayStyle>,这是一个小部件,只对你包装的小部件有效。
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
),
child: Scaffold(
...
),
)
其他回答
对于那些有iOS和Android颜色不一致的问题的人来说,这个方法对我来说很管用:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
return AppBar(
systemOverlayStyle: (Platform.isIOS)
? SystemUiOverlayStyle.light
: const SystemUiOverlayStyle(
statusBarColor: pbsBlue,
statusBarIconBrightness: Brightness.light,
statusBarBrightness: Brightness.light,
),
backgroundColor: Colors.blue,
title: Text('Home'),
);
请注意,这是AppBar可重用小部件的摘录。
return Scaffold(
backgroundColor: STATUS_BAR_COLOR_HERE,
body: SafeArea(
child: scaffoldBody(),
),
);
适用于iOS和Android
import 'package:flutter/services.dart';
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
return Scaffold();
}
使用AnnotatedRegion是最适合我的,特别是如果我没有AppBar
import 'package:flutter/services.dart';
...
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: ...,
),
);
}
你可以在Android上使用:
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
systemNavigationBarColor: Colors.blue, // navigation bar color
statusBarColor: Colors.pink, // status bar color
));
}