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);
}
相关推荐
程序员清洒5 小时前
Flutter for OpenHarmony:GridView — 网格布局实现
android·前端·学习·flutter·华为
嘴贱欠吻!6 小时前
Flutter鸿蒙开发指南(七):轮播图搜索框和导航栏
算法·flutter·图搜索算法
Miguo94well6 小时前
Flutter框架跨平台鸿蒙开发——地理知识速记APP的开发流程
flutter·华为·harmonyos·鸿蒙
LawrenceLan6 小时前
Flutter 零基础入门(二十六):StatefulWidget 与状态更新 setState
开发语言·前端·flutter·dart
2401_892000527 小时前
Flutter for OpenHarmony 猫咪管家App实战 - 添加提醒实现
前端·javascript·flutter
时光慢煮7 小时前
【Flutter × OpenHarmony】跨端开发实现全局Toast提示卡片
flutter·华为·开源·openharmony
IT陈图图7 小时前
Flutter × OpenHarmony 混合布局实战:在一个容器中优雅组合列表与网格
flutter·鸿蒙·openharmony
2603_949462109 小时前
Flutter for OpenHarmony社团管理App实战:意见反馈实现
android·flutter
kirk_wang10 小时前
Flutter艺术探索-Flutter渲染优化:Widget生命周期与性能分析
flutter·移动开发·flutter教程·移动开发教程
南村群童欺我老无力.10 小时前
Flutter 框架跨平台鸿蒙开发 - 校园生活一站式:打造智慧校园服务平台
flutter·华为·harmonyos