【Flutter 问题系列第 45 篇】Flutter 改变状态栏的背景颜色和字体颜色

这是【Flutter 问题系列第 45 篇】，如果觉得有用的话，欢迎关注专栏。

一：问题描述

有的时候 App 中并没有设置 AppBar，这个时候顶部状态栏就会出现如下图所示的颜色 如果你想更改状态栏的背景颜色和字体颜色，可以这样做。

二：解决方案

首先引入 import 'package:flutter/services.dart'; 文件，然后根据如下代码片段设置你先要的颜色

void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    // Brightness.light 状态栏字体颜色（白色）
    statusBarIconBrightness: Brightness.dark, // 状态栏字体颜色（黑色）
    statusBarColor: Colors.yellow, // 状态栏背景色
  ));
  runApp(MyApp());
}

如果你想让状态栏的背景色设置为透明。可以设置 statusBarColor 属性为 Colors.transparent

下面是真机演示效果

效果一（黄色背景，黑色字体） 效果二（黑色背景，白色字体） 效果三（透明背景，黑色字体） 你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语 Google 的 Flutter 越来越火，截止 2021年9月12日 GitHub 标星已达 130K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。 无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到 CSDN 博客中，希望自己学习的同时，也可以帮助更多的人。