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);
}
相关推荐
光影少年4 小时前
Flutter生态及学习路线
学习·flutter
傅里叶11 小时前
SchedulerBinding 的三个Frame回调
前端·flutter
立方世界11 小时前
Flutter技术栈深度解析:从架构设计到性能优化
flutter
前端 贾公子11 小时前
《Vuejs设计与实现》第 18 章(同构渲染)(上)
android·flutter
ZFJ_张福杰11 小时前
【Flutter】约束错误总结(Constraint Error 全面解析)
flutter
程序员老刘1 天前
2025年Flutter状态管理新趋势:AI友好度成为技术选型第一标准
flutter·ai编程·客户端
AGG_Chan2 天前
flutter专栏--深入了解widget原理
开发语言·javascript·flutter
墨客希2 天前
通俗易懂的理解Vue.js
vue.js·flutter
—Qeyser2 天前
Flutter bottomNavigationBar 底部导航栏
flutter