Flutter升级targetSdkVersion至35后UI与Android系统手势/导航栏重叠问题

嗨，我刚好踩过这个坑！升级Flutter项目的targetSdkVersion到35之后，页面底部的UI元素（比如版本信息、关闭按钮）直接和Android系统的导航栏/手势栏重叠了，而在SDK 32或33版本时完全正常——之前Flutter布局会自动避开导航栏区域，根本不用手动调整。

问题详情 #

• 预期表现：底部的组件应该自动避开手势导航区域或物理导航按钮，不会被遮挡
• 实际表现：升级到targetSdkVersion 35后，底部布局直接卡在手势区域下方，出现重叠遮挡

测试环境 #

• Flutter版本：Flutter 3.32.8
• 目标SDK版本：35
• 测试设备：Realme RMX3990（使用手势导航模式）
• 平台：Flutter Android端

已验证的解决方案 #

我查了相关的Flutter内部讨论后找到了解决方案，只需要在项目的styles.xml文件中添加以下配置，禁用Android 14（SDK35）新增的全屏强制规则即可：

<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>

添加后，Flutter布局就会回到之前的行为，自动避开系统导航栏/手势区域，底部的UI元素再也不会被遮挡啦。

内容来源于stack exchange