Flutter 状态栏完美攻略

1. 沉浸式状态栏

Dart 复制代码
Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          toolbarHeight: 0,
        ),
        body: Container(color:Colors.red)
)

2. 状态栏的背景颜色

Dart 复制代码
Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
        ),
        body: Container(color:Colors.red)
)

3. 状态栏的文字颜色

Brightness.light文字黑色
Brightness.dark文字白色

Dart 复制代码
Scaffold(
        appBar: AppBar(
          brightness: Brightness.light,
        ),
        body: Container(color:Colors.red)
)

4. 沉浸式状态栏下的安全区域

Dart 复制代码
Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          toolbarHeight: 0,
        ),
        body: SafeArea(child:Container(color:Colors.red))
)

5. Android机器的状态栏颜色改为透明

默认是带个遮罩的,完全去除:

Dart 复制代码
void main() async {
   runApp(MaterialApp());
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
相关推荐
weixin_460783873 分钟前
Flutter解决TabBar顶部页面切换导致页面重载问题
android·javascript·flutter
火柴就是我6 小时前
flutter rust bridge 编译成so 文件 或者 .a文件 依赖到主项目
flutter·ios·rust
pengyu7 小时前
系统化掌握Flutter组件之Transform:空间魔法师
android·flutter·dart
坚果的博客8 小时前
鸿蒙版Flutter快递查询助手
flutter·华为·harmonyos
晴天学长9 小时前
一个多功能的GetX 项目代码生成工具
前端·flutter
蜡笔小新..10 小时前
Windows下配置Flutter移动开发环境以及AndroidStudio安装和模拟机配置
windows·flutter
顾林海12 小时前
深入理解 Dart 函数:从基础到高阶应用
android·前端·flutter
A0微声z13 小时前
从0到1掌握Flutter(二)环境搭建与认识工程
flutter
SoaringHeart14 小时前
Flutter进阶:局部嵌套导航实现 Navigator
前端·flutter
张风捷特烈15 小时前
Trae&Flutter | 助力 TolyUI 模块管理与发布
android·flutter·trae