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);
}
相关推荐
AiFlutter2 小时前
蓝牙助手APP开发(01):功能展示
flutter·低代码·低代码平台·aiflutter·aiflutter 低代码·蓝牙调试·蓝牙助手app
2501_946675645 小时前
Flutter与OpenHarmony打卡步进器组件
java·javascript·flutter
消失的旧时光-19436 小时前
Flutter API 设计最佳实践(终极版)
flutter
2501_946675647 小时前
Flutter与OpenHarmony打卡滑动开关组件
flutter
2501_946244788 小时前
Flutter & OpenHarmony OA系统弹窗对话框组件开发指南
javascript·flutter·microsoft
2501_9466756412 小时前
Flutter与OpenHarmony打卡轮播图组件
java·javascript·flutter
走在路上的菜鸟12 小时前
Android学Flutter学习笔记 第一节 Android视角认知Flutter(View,intent,Async UI)
android·学习·flutter
2501_9462447814 小时前
Flutter & OpenHarmony OA系统图片预览组件开发指南
android·javascript·flutter
2501_9466756415 小时前
Flutter与OpenHarmony打卡消息提示组件
flutter
走在路上的菜鸟15 小时前
Android学Flutter学习笔记 第二节 Android视角认知Flutter(resource,生命周期,layout)
android·学习·flutter