flutter沉浸式-底部状态栏透明沉浸

部分安卓机型,bottomNavigationBar下边区域存在一定黑色区域,特别是有一定弧度的空白区,看着不美观.

方法1: 在android\app\src\main\res\values\styles.xml文件中添加@android:color/transparent

    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

这种方法将底部区域改成透明背景

方法2: 使用 SystemUiOverlayStyle类

@immutable
class SystemUiOverlayStyle {
  /// Creates a new [SystemUiOverlayStyle].
  const SystemUiOverlayStyle({
    this.systemNavigationBarColor, //	系统底部导航栏的颜色
    this.systemNavigationBarDividerColor,	// 系统底部导航栏和应用内容之间的分隔线颜色
    this.systemNavigationBarIconBrightness, //	系统导航栏图标的亮度
    this.systemNavigationBarContrastEnforced,  //	设置透明导航栏时覆盖对比度强制
    this.statusBarColor,	// 顶部状态栏背景色
    this.statusBarBrightness,	// 设置顶部状态栏深浅色
    this.statusBarIconBrightness,	// 设置顶部状态栏图标深浅色
    this.systemStatusBarContrastEnforced,	// 设置透明状态栏时覆盖对比度强制
  });
}

在main入口配置即可,代码如下:

main() {
  runApp(MyApp());
  
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        systemNavigationBarColor: "#2196f3".toColor); 
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  }
}

效果如下