首先看看flutter官方提供的状态栏默认适配方案
显然,只是简单地加一个模糊背景,不够美观,目前常见的app的状态栏应该是透明的,且字体颜色会随背景颜色变化。flutter中状态栏样式设置分局部设置与全局设置两种。
设置全局状态栏样式
首先
import 'package:flutter/services.dart';
然后在runApp后调用setSystemUIOverlayStyle()方法
void main() {
runApp(MyApp());
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light));
}
运行结果:
设置局部状态栏样式
在initState()方法中调用setSystemUIOverlayStyle()方法即可,局部会覆盖全局的样式。