前言

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

一、默认状态栏

默认的状态栏，大多有系统自带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,//阴影设置为0elevation: 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,),

效果如图：

结语

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

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

Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）...
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
android沉浸式状态栏、fitsSystemWindows、标题栏折叠
现在大部分android手机都是android4.4以上,都支持开发者可以自定义状态栏色值,原来的黑底白字时代已过去.在android5.0上我们还可以自定义状态栏文字色值,让其显示深色字体. 一.沉 ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
Android 沉浸式状态栏的实现方法、状态栏透明
现在越来越多的软件都开始使用沉浸式状态栏了,下面总结一下沉浸式状态栏的两种使用方法注意!沉浸式状态栏只支持安卓4.4及以上的版本状态栏:4.4上是渐变色,5.0上是完全透明,本文模拟器为4.4演示 ...
android 工具栏沉浸下拉,如何在Android应用中实现一个沉浸式状态栏效果
如何在Android应用中实现一个沉浸式状态栏效果发布时间:2020-12-08 17:04:42 来源:亿速云阅读:151 作者:Leah 这篇文章将为大家详细讲解有关如何在Android应用中 ...
android沉浸式状态栏、变色状态栏、透明状态栏、修改状态栏颜色及透明
首先我要区分清楚沉浸式状态栏与变色状态栏. 沉浸式状态栏指的是,状态栏隐藏,在手指做了相关操作后,状态栏显示出来,例如视频播放器,在播放视频时是隐藏状态栏的,但是点击屏幕的时候,状态栏会显示出来,再例 ...
android透明度大全,状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
手机的顶部状态栏,也就是信号.电量那条,有4种状态,分别是正常.变色.透明(也称沉浸式状态栏).消失(也就是全屏). 后3种特殊用法,具体见下: 状态栏变色常见使用场景:如果title背景为纯色且显 ...
简单易懂的沉浸式状态栏使用详解(1)——状态栏全透明（含虚拟按键适配）
说明:我尽量不打错别字,用词准确,不造成阅读障碍. 沉浸式状态栏就是指那种状态栏透明或半透明或与ToolBar颜色配合的颜色.这个"沉浸式"的名称已不可考究,错误的叫法叫多了,大家 ...

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

文章目录

前言