Flutter自定义导航栏更改状态栏颜色兼容Android，IOS

flutter自定义导航栏更改状态栏颜色兼容Android，IOS

flutter下自定义导航栏更改状态栏背景颜色和字体颜色，测试ios、Android有效

前言

flutter最近火得有些过分，做为一名后端我都想试试它。国内目前关于flutter的文档还是挺少的，很多问题都难以找到解决方案。最近在使用flutter也遇见了不少的问题，就拿更改flutter状态栏背景、字体颜色来说道说道，在百度、google上随便一搜都有一大堆的文章说明如何使用flutter属性来实现，但是在真正自己实际开发中发现并不能达到预期的目的，ios，android不同平台上没有真正解决实际问题。下面解决办亲测ios、Android有效

属性

• AnnotatedRegion
• AppBar

两个属性都可以达到更改状态栏的目的，但是在真机开发过程中发现 AnnotatedRegion 在ios下无法达到预期的效果字体和颜色都没有改变，AppBar 在Android下也不能达到预期效果。并且 AnnotatedRegion 在页面上存 在appBar 下的情况下不会生效。解决办法就是通过Theme.of(context).platform判断当前是ios还是android根据不同的平台使用不同的属性，具体代实现码如下

  Widget build(BuildContext context) {
    return AnnotatedRegion(   // 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