前言
在App设计中状态栏纯色的这种设计很常见，但是如果状态栏需要为白色的时候就必须为黑色字体。在Android中已经有很多成熟的方案来处理这种情况，那我们现在看看在Flutter中这种情况该怎么处理。
具体设置
1、设置主题色
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.red, primaryColor: Colors.white), //设置App主题
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
这里的ThemeData即为控制App的主题，primarySwatch设置即可控制主题的各类颜色，但是这里的颜色是需要MaterialColor，但是纯色种的黑色和白色不是MaterialColor。所以不能设置primarySwatch为Colors.white。
注：MaterialColor包含以下这些
- red,
- pink,
- purple,
- deepPurple,
- indigo,
- blue,
- lightBlue,
- cyan,
- teal,
- green,
- lightGreen,
- lime,
- yellow,
- amber,
- orange,
- deepOrange,
- brown,
- blueGrey,
那么就只能使用其他方式设置主题为白色。即为设置
primaryColor: Colors.white
此时我们可以看到App的状态栏如下所示（Android）
2.jpg
2、设置状态栏
虽然AppBar变成了白色，但是状态栏是灰色显然不是我们想要的。
尝试设置文字颜色，AppBar的Brightness有两种模式light和dark
appBar: PreferredSize(
child: AppBar(
brightness: Brightness.dark,
title: Center(
child: Text(
"FlutterDemo",
),
),
),
preferredSize: Size(double.infinity, 60)
),
这个和SystemUiOverlayStyle的light和dark刚好相反
final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
? SystemUiOverlayStyle.light
: SystemUiOverlayStyle.dark;
然后设置状态栏颜色
import 'dart:io';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.red,
// statusBarBrightness: Brightness.light,
// statusBarIconBrightness: Brightness.dark
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
print("systemUiOverlayStyle");
}
}
设置为红色之后，得到以下的样式，可以看到状态栏为红色了，文字为白色
3.jpg
那么接下来我们只需要将状态栏设置为白色或者透明，状态栏文字设置为黑色。
void main() {
runApp(MyApp());
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
statusBarColor: Colors.transparent, //设置为透明
);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
最后得到以下视图
1.jpg
3、推荐AppBar的使用方式
注：使用PreferredSize包裹，可以更得心应手哦！
// appBar: PreferredSize(
// child: Container(
// width: double.infinity,
// height: double.infinity,
// decoration: BoxDecoration(color: Colors.white, boxShadow: [
// BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.2), blurRadius: 10.0)
// ]),
// child: SafeArea(
// child: Center(
// child: Text("FlutterDemo",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),),
// )),
// ),
// preferredSize: Size(double.infinity, 60)),
appBar: PreferredSize(
child: AppBar(
backgroundColor: Colors.white,
brightness: Brightness.light,
title: Center(
child: Text(
"FlutterDemo",
),
),
),
preferredSize: Size(double.infinity, 60)),
4、其他注意事项
SystemUiOverlayStyle在设置时其实有很多系统或者版本的限制
/// The color of top status bar.
///
/// Only honored in Android version M and greater.
final Color statusBarColor; //设置状态栏颜色，只在Android的M版本以上生效
/// The brightness of top status bar.
///
/// Only honored in iOS.
final Brightness statusBarBrightness; //状态栏亮度，只在IOS生效，只有light和dart模式
/// The brightness of the top status bar icons.
///
/// Only honored in Android version M and greater.
final Brightness statusBarIconBrightness; //状态栏Icon亮度，只在Android的M版本以上生效，只有light和dart模式，和AppBar的brightness相反
