【Flutter】如何完成一个透明沉浸式状态栏

---

前言

之前遇到的一个需求需要做一个透明的沉浸式状态栏，中间遇到一些问题，记录下来，给有需要的小伙伴指指路。

---

一、默认状态栏

默认的状态栏，大多有系统自带UI，很多时候看起来跟我们的app不协调。

二、修改状态栏

1.基本的沉浸式状态栏

修改main.dart

void main() {
    
    
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    //设置状态栏颜色
    statusBarColor: Colors.transparent,
  ));
  runApp(const MyApp());
}

效果如图：

2.透明沉浸式状态栏

但我是需要一个透明的沉浸式状态栏，so，在Appbar这里操作一下：

AppBar(
   title: const Text("视频示例"),
   //设置appbar背景色透明
   backgroundColor: Colors.transparent,
   //阴影设置为0
   elevation: 0,
      ),

效果如图：

什么鬼，第一眼我还以为状态栏消失了。

3.优化透明沉浸式状态栏

OK，so，优化一下，把状态栏字体和标题字体改下颜色，让我们能看得见。
注意这行，把状态栏的字体改成黑色：
systemOverlayStyle: SystemUiOverlayStyle.dark,

AppBar(
   //修改状态栏字体颜色
   systemOverlayStyle: SystemUiOverlayStyle.dark,
   title: const Text(
     "视频示例",
   style: TextStyle(color: Colors.black, fontSize: 17),
   ),
   backgroundColor: Colors.transparent,
   elevation: 0,
   ),

效果如图：

---

结语

实现的时候，看了不少文章，不太全，实现了之后，自己整理了整个过程，希望对有需要的小伙伴有帮助吧！