Flutter 状态栏完美攻略

最新推荐文章于 2024-05-03 21:48:30 发布

原创最新推荐文章于 2024-05-03 21:48:30 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍了如何在Flutter应用中自定义状态栏，包括实现沉浸式状态栏、设置状态栏背景颜色、文字颜色，以及在Android设备上将状态栏设为透明。同时提到了使用SafeArea确保内容在沉浸式状态栏下显示的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 沉浸式状态栏

Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          toolbarHeight: 0,
        ),
        body: Container(color:Colors.red)
)

2. 状态栏的背景颜色

Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
        ),
        body: Container(color:Colors.red)
)

3. 状态栏的文字颜色

Brightness.light文字黑色
Brightness.dark文字白色

Scaffold(
        appBar: AppBar(
          brightness: Brightness.light,
        ),
        body: Container(color:Colors.red)
)

4. 沉浸式状态栏下的安全区域

Scaffold(
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          toolbarHeight: 0,
        ),
        body: SafeArea(child:Container(color:Colors.red))
)

5. Android机器的状态栏颜色改为透明

默认是带个遮罩的，完全去除：

void main() async {
   runApp(MaterialApp());
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}