Flutter中沉浸式状态栏的设置

Flutter中沉浸式状态栏的设置

沉浸式状态栏是什么？

状态栏是指Android手机顶部显示手机状态信息的位置，Android从4.4版本开始新增了透明状态栏功能，状态栏可以自定义颜色背景，是titleBar能够和状态栏融为一体，增进沉浸感。

状态栏默认为黑色半透明，设置沉浸式状态栏后，可以与标题栏颜色一致，效果如上图。

如何实现沉浸式状态栏

在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java，判断一下版本号然后将状态栏颜色修改设置成透明，因为他本身是黑色半透明。

MainActivity.kt路径：android\app\src\main\kotlin\com\example\flutter_app\MainActivity.kt

新增以下代码：

import android.os.Build;
import android.os.Bundle;


class MainActivity: FlutterActivity() {
    //设置状态栏沉浸式透明（修改flutter状态栏黑色半透明为全透明）
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            window.statusBarColor = 0
        }
    }
}

使用Kotlin语言的MainActivity.kt路径：android\app\src\main\java\com\example\flutter_app\MainActivity.java

新增以下代码以上所示的代码。

可能存在的问题及解决方案

在经过上面的设置之后，可能存在背景颜色为浅色而状态栏也为浅色的情况，这时候状态栏就会看不清楚。可以又以下几种解决方案。

// Created by Qiaozi 20210823
//方案1
import 'package:flutter/services.dart';
void main() {
  runApp(MyApp());
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);//有dark和light两个可选值
}


//方案2
//设置 AppBar brightness 属性值，修改状态栏颜色
appBar: AppBar(
        brightness: Brightness.light,
)
//Brightness.light 黑色
//Brightness.dark 白色


//方案3 
//使用AnnotatedRegion修改状态栏颜色
@override
  Widget build(BuildContext context) {

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Material(child:Scaffold(),),);
  }
//SystemUiOverlayStyle.light 白色
//SystemUiOverlayStyle.dark 黑色