FlutterFlow中Android系统导航栏的配置选项咨询

FlutterFlow的可视化界面目前没有直接提供设置Android导航栏透明度的开关，你可以通过以下两种方式实现：

• 自定义Flutter代码实现（无需导出项目）
  在FlutterFlow中创建一个Custom Action，添加以下代码来设置导航栏样式：

  import 'package:flutter/services.dart';
  
  Future<void> setTransparentNavBar() async {
    // 设置导航栏为透明，并允许内容延伸到导航栏下方
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.dark, // 根据App主题调整图标亮度
      systemNavigationBarDividerColor: Colors.transparent,
    ));
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  }
  

  之后在应用的初始页面，添加On Page Load事件，调用这个自定义Action即可生效。

• 修改Android原生配置（需导出项目代码）
  如果你可以导出FlutterFlow的项目代码，找到android/app/src/main/res/values/styles.xml文件，在应用的主题样式中添加以下属性：

  <item name="android:navigationBarColor">@android:color/transparent</item>
  <item name="android:enforceNavigationBarContrast">false</item>
  <item name="android:windowTranslucentNavigation">true</item>
  

  保存后重新编译APK，就能得到半透明的导航栏效果。

• 额外注意
  需要确保页面布局适配透明导航栏：在FlutterFlow的页面设置中，调整Safe Area属性，取消底部的安全区域限制，让页面内容可以延伸到导航栏下方，避免出现空白区域。

内容的提问来源于stack exchange，提问作者JᴀʏMᴇᴇ