Flutter 设置修改状态栏颜色

原创

已于 2024-09-03 19:04:42 修改 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2024-09-03 18:38:22 首次发布

项目场景：

大部分App都会修改状态栏颜色的需求，Flutter开发的 App 也是支持的。

问题描述

App首页状态栏默认用白色图标和文字那个，当切换到二级页面的时候，如果二级页面状态栏是黑色的，那么返回到首页会显示黑色的。

解决方案：

一般首页都是全透明的导航栏和状态栏， Scaffold记得加上这个属性
extendBodyBehindAppBar: true 非常关键的一个字段。

Light 和 Dark 关键代码如下：
custom_status_bar.dart

  static const SystemUiOverlayStyle light = SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.dark,
  );

  static const SystemUiOverlayStyle dark = SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.dark,
    status