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);
}
相关推荐
天空之城--11 分钟前
Android Flutter行业动态与学习参考(2026年8月)
android·flutter
FungLeo1 小时前
Flutter Web 中文字体困境与渲染器选择:CanvasKit vs HTML renderer 实战
前端·flutter·html
杉氧2 小时前
原生交互:如何在 Flutter 中嵌入 Android/iOS 原生组件并解决手势冲突
android·flutter·dart
恋猫de小郭3 小时前
Flutter iOS Deep Link 为什么会突然失效:一系列难以言喻的问题
android·前端·flutter
FungLeo17 小时前
Flutter fl_chart 0.70 破坏性 API 迁移实录:duration/getTooltipColor/withValues 全解
flutter·fl_chart
FungLeo1 天前
Flutter 吸顶分组列表实战:语义桶分组 + 点击头平滑滚动
android·flutter
FungLeo1 天前
Flutter 超长 StatefulWidget 拆分术:part of + extension on State 实战
android·flutter·dart
GitLqr1 天前
Impeller 时代:Shader Jank 消失了,但渲染性能的战场也变了
flutter·面试·性能优化
恋猫de小郭1 天前
Flutter 的另外一种形态?社区 DartNative 要来了。
android·前端·flutter
阿里云云原生2 天前
还原一次用户等待:深度解析 Flutter RUM SDK 如何打通 Dart 到 Native 的观测链路
flutter