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

最新推荐文章于 2024-01-23 20:17:02 发布
最新推荐文章于 2024-01-23 20:17:02 发布
阅读量3.1k 收藏 4
点赞数
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44354735/article/details/126699998
版权
本文详细介绍了如何在Flutter中实现透明沉浸式状态栏，包括基本的沉浸式设置、透明状态栏的创建以及对透明状态栏的优化，确保状态栏字体可见。
摘要由CSDN通过智能技术生成

文章目录

前言

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

一、默认状态栏

默认的状态栏，大多有系统自带UI，很多时候看起来跟我们的app不协调。
在这里插入图片描述

二、修改状态栏

1.基本的沉浸式状态栏

修改main.dart

void main() {
   
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    <
最低0.47元/天 解锁文章
Hulk不想努力了
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Flutter沉浸式透明状态栏-flutter自定义凸起BottomAppBar导航
m0_61369360的博客
03-21 1141
外链图片转存中…(img-eDXhBvR6-1710967884929)]
Flutter中导航栏和状态栏设置成透明
eastWind1101的博客
06-21 1314
Flutter中导航栏和状态栏设置成透明, 导航栏设置成定位
flutter沉浸式状态栏
海阔天空
06-17 2307
flutter沉浸式状态栏
Flutter | 设置顶部状态栏的显示、隐藏、半透明灰色显示
^_^
11-25 3020
Flutter、设置顶部状态栏的显示、隐藏、半透明灰色显示。
Flutter 如何设置状态栏
最新发布
qq_31433709的博客
01-23 1057
通过使用类的方法来设置状态栏的样式，包括透明状态栏。以下是一个简单的示例：首先，在文件中添加然后，在Flutter代码中使用在上面的代码中，方法被用于设置状态栏的样式。通过对象，你可以指定状态栏的颜色，这里将其设置为透明色，同时还可以设置状态栏图标的颜色等。请注意，这样设置状态栏透明后，状态栏将不再占用应用程序的布局空间，而是覆盖在应用程序上方。这可能会影响你的布局和UI。如果需要处理状态栏高度的问题，你可能需要适当调整你的布局。
【Flutter】四十一、Flutter解决沉浸式状态栏——SafeArea
01-07
下面是一个简单页面： import 'package:flutter/material.dart'; class SafeAreaRoute extends StatelessWidget{ @override Widget build(BuildContext context) { ...    注意这里的状态栏是沉浸式的，如果在Sca
Flutter 透明状态栏及字体颜色的设置方法
08-19
在 Flutter 开发中，设置透明状态栏及字体颜色是一项重要的任务，本文将详细介绍如何设置 Flutter 透明状态栏及字体颜色的方法。 首先，需要在 main.dart 文件中设置 SystemUiOverlayStyle，通过该方式可以设置整个...
Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果
01-20
如上图Flutter状态栏默认为黑色半透明，那么如何去掉这个状态栏的黑色半透明背景色，让其和标题栏颜色一致，通栏沉浸式，实现如下图效果呢？且继续看下文讲述。 在flutter项目目录下找到android主入口页面...
沉浸式状态栏头部拉伸一键置顶.rar
07-30
在"沉浸式状态栏头部拉伸一键置顶.rar"这个压缩包中，我们可以推测包含的是与Android应用开发相关的源代码或资源文件，可能是一个实现上述特性的示例项目或者代码库。由于无法直接查看压缩包内容，以下是对这些概念...
Flutter 状态栏完美攻略
NotBad_的博客
07-31 1281
【代码】Flutter 状态栏完美攻略。
Flutter 封装可自定义样式的沉浸式导航栏 NavigationBar
weixin_43800535的博客
02-22 1153
Flutter 封装可自定义的沉浸式导航栏 NavigationBar
flutter 状态栏 AppBar 设置透明和半透明
半身风雪
11-18 7402
在日常开发中，很多时候，我们需要把状态栏设置成透明和半透明的状态，本篇文章将记录最简单最实用的设置方式。
FlutterComponent最佳实践之沉浸式
eclipse_xu
03-24 3596
点击上方蓝字关注我，知识会给你力量沉浸式状态栏，在Android开发中是一个比较麻烦的地方，因为不同的机型和版本兼容问题太多了，API变化也快，但是到了Flutter，一切问题都解决了，因为整个区域都是Skia绘制的，要什么都行，随便来。❝以上问题只针对Android，因为iOS没这问题。。。默认就是沉浸式，只能说，Google的设计师，真是不懂行情。❞我们来看下iOS的...
【Flutter】【widget】AppBar 顶部状态栏
自动人生博客
11-07 1689
顶部状态栏的快速实现。默认新建的时候有一个标题。欢迎关注，留言，咨询，交流！
【Flutter】沉浸式导航
夜雨Gecer的博客
07-17 741
效果 结构是使用Stack布局先给后面的控件弄个图片的背景，之后再上Scaffold,再将相关的组件背景设为透明即可. 代码 class Body extends StatelessWidget { @override Widget build(BuildContext context) { return Stack( children: <Widget>[ Image.network( 'https://timg.
Flutter 沉浸式状态栏
闪亮的大早的博客
10-31 688
flutter项目运行起来，在ios上显示是没有最上边的半透明阴影，在android上状态栏有是有黑色阴影的。
flutter 设置状态栏透明
08-30
要设置Flutter应用的状态栏为透明，可以按照以下步骤进行操作。 首先，在Flutter的项目中找到`pubspec.yaml`文件，在`dependencies`部分添加`flutter_statusbarcolor`插件的依赖。例如： ``` dependencies: flutter: sdk: flutter flutter_statusbarcolor: ^0.6.0 ``` 然后，在需要设置状态栏透明的页面中，导入`flutter_statusbarcolor`插件。例如： ```dart import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart'; ``` 接下来，调用`Statusbarcolor.setTransparent()`方法来设置状态栏为透明。例如： ```dart @override void initState() { super.initState(); setStatusBarColor(); } void setStatusBarColor() async { await FlutterStatusbarcolor.setStatusBarColor(Colors.transparent); FlutterStatusbarcolor.setStatusBarWhiteForeground(true); } ``` 在上述示例代码中，`setStatusBarColor()`方法被用于设置状态栏颜色。`setStatusbarColor()`方法将状态栏的颜色设置为透明，而`setStatusBarWhiteForeground()`方法则用于设置状态栏前景色为白色。 最后，运行Flutter应用，状态栏将会显示为透明的效果。 请注意，这个方法仅适用于Android平台。对于iOS平台，需要在Xcode中进行相关设置，详情请参考Flutter官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值