flutter自定义导航栏更改状态栏颜色兼容Android,IOS
flutter下自定义导航栏更改状态栏背景颜色和字体颜色,测试ios、Android有效
前言
flutter最近火得有些过分,做为一名后端我都想试试它。国内目前关于flutter的文档还是挺少的,很多问题都难以找到解决方案。最近在使用flutter也遇见了不少的问题,就拿更改flutter状态栏背景、字体颜色来说道说道,在百度、google上随便一搜都有一大堆的文章说明如何使用flutter属性来实现,但是在真正自己实际开发中发现并不能达到预期的目的,ios,android不同平台上没有真正解决实际问题。下面解决办亲测ios、Android有效
属性
- AnnotatedRegion<SystemUiOverlayStyle>
- AppBar
两个属性都可以达到更改状态栏的目的,但是在真机开发过程中发现 AnnotatedRegion 在ios下无法达到预期的效果字体和颜色都没有改变,AppBar 在Android下也不能达到预期效果。并且 AnnotatedRegion 在页面上存 在appBar 下的情况下不会生效。解决办法就是通过Theme.of(context).platform判断当前是ios还是android根据不同的平台使用不同的属性,具体代实现码如下
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>( // android 更改状态栏颜色
value: SystemUiOverlayStyle(
statusBarColor: Colors.white,
statusBarIconBrightness: Brightness.dark,
systemNavigationBarColor: Colors.white,
),
child: Scaffold(
backgroundColor: Colors.white,
appBar: PreferredSize( //ios下更改状态栏颜色
//判断是是否是android,是android需去掉AppBar,否则无AnnotatedRegion无效
child: Theme.of(context).platform == TargetPlatform.android
? Container()
: AppBar(backgroundColor: Colors.white, elevation: 0),
preferredSize: Size.fromHeight(0),
),
body:Text('hello world'),
)
)
}
查看源码发现SystemUiOverlayStyle有dark和light两个自带的属性,SystemUiOverlayStyle.dark和SystemUiOverlayStyle.light在ios是效果的,但是只能修改状态的字体颜色但是无法修改背景颜色
上面的示例代码在ios黑暗模式下状态栏的字体颜色默认是白色的,关于ios黑暗模式的问题解决办法也有很多请自行google