Flutter升级至v2后Android端底部导航栏顶部边框移除咨询

问题描述 #

项目从Flutter v1版本全量升级至v2版本后，编译生成的Android应用出现UI异常表现：底部导航栏的上方附带一道无设计预期的多余顶部边框，不属于原有界面逻辑中的分隔元素，暂时找不到直接移除该边框的配置入口。

对应解决操作 #

该异常是Flutter v2版本对Material风格底部导航组件的默认参数调整导致的，按项目实际的导航栏实现方式对应调整即可：

• 若页面直接使用BottomNavigationBar组件：给组件实例设置elevation: 0属性。该属性用于控制组件的投影层级，v2版本将其默认值从v1的0调整为1，在Android平台上会渲染成导航栏顶部的一道细边框，将属性值设为0后可完全移除该多余线条。
• 若项目通过全局配置统一底部导航样式：找到全局ThemeData中的BottomAppBarTheme定义，将该主题下的elevation值统一设置为0，无需逐页面修改组件配置，即可覆盖版本升级引入的默认边框效果。
• 完成上述参数调整后仍存在残留边框的，可检查导航栏顶部区域是否意外叠加了Divider、Container自定义边框等冗余分隔组件，删除对应冗余组件定义即可。

内容的提问来源于stack exchange，提问作者A.A