Flutter：改变手机状态栏颜色，与appBar状态颜色抱持一致

无知的小菜鸡

已于 2023-11-12 21:18:10 修改

阅读量1.3k

点赞数 1

分类专栏： dart 和 Flutter 文章标签： flutter

于 2023-11-12 21:08:12 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/134365569

版权

dart 和 Flutter 专栏收录该内容

63 篇文章 12 订阅

订阅专栏

本文讲述了在Flutter中遇到appBar颜色与手机状态栏不一致的问题，通过探索发现使用SystemChrome的setSystemUIOverlayStyle方法，特别是设置statusBarColor为透明并调整图标亮度，成功实现了两种颜色的统一，无论是否有抽屉效果。

摘要由CSDN通过智能技术生成

前言

最近在搞app的开发，本来没怎么注意appBar与手机状态栏颜色的问题。但是朋友一说才注意到这两种的颜色是不一样的。

我的app

在这里插入图片描述
京东

在这里插入图片描述

qq音乐

在这里插入图片描述
这样一对比发现是有的丑啊，那么如何实现呢？

实现

怎么说呢，真不会。百度到的一些是使用第三方插件，问gpt第一次也是说使用第三方插件。
后来gpt突然给我了一个这个方案。

初始方案

import 'package:flutter/services.dart';

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
        statusBarColor: Colors.lightBlueAccent, // 设置非抽屉部分状态栏的颜色为蓝色
      ),
    );

就是怎么简单，里面就实现了手机状态栏颜色，与appBar状态颜色抱持一致。
在这里插入图片描述

最终方案
你以为这样就完成了，没有。我看到了类似文学一言等有抽屉的app：
在这里插入图片描述
这就离谱，还能实现两个颜色。别人的app能，咱们的app也必须能。

再次求助gpt，无论怎么向她描述这个问题，反正就是得不到正确的解决方案。本来想着既然实现不了，那就不要了。但是突然脑子里出来了一个想法，最特殊的那个颜色行不行呢，还真行。用透明可以完美解决这个问题。

SystemChrome.setSystemUIOverlayStyle(
   const SystemUiOverlayStyle(
     statusBarColor: Colors.transparent,
     statusBarIconBrightness: Brightness.dark, // 设置状态栏图标和字体为亮色（黑色）
   ),
 );