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);
}
相关推荐
ZFJ_张福杰19 小时前
【Flutter】Flutter 中有哪些耗时操作?从 UI 卡顿到 Isolate 性能优化
flutter·性能优化·卡顿·isolate
sakiko_20 小时前
Flutter:Dart学习笔记1:基础UI组件等
flutter
97650333521 小时前
iOS 上架 4.3a 被拒【uniapp专讲】
flutter·ios·objective-c·uniapp·swift
传奇开心果编程1 天前
【Flutter入门练中学】第2课:布局系统
学习·flutter·ui
君赏2 天前
FlutterPatch:把 Shorebird 热更新的控制面搬回自己服务器
flutter
用户2181697049302 天前
Flutter tootip 轻量级提示
flutter
用户2181697049302 天前
Flutter 拖拽 Draggable DragTarget
flutter
yume_sibai2 天前
05-Flutter实战项目
前端·flutter
传奇开心果编程2 天前
【Flutter入门练中学】第1课:从零开始
学习·flutter·ui
用户2181697049303 天前
Flutter ClipPath
flutter