Flutter 带缺口FloatingActionButton升级SDK后显示异常问题求助

这是Flutter 3.10~3.12版本的已知渲染时序问题，原因是SDK优化底层布局计算逻辑后，BottomAppBar的缺口裁剪计算时机早于嵌套缩放的FloatingActionButton的尺寸计算完成时机，首次构建时拿不到正确的FAB参数就会出现缺口缺失/异常，页面重建时FAB尺寸已经缓存完成，所以显示恢复正常。

可通过以下几种方式自行修复：

• 调整布局结构，删除FloatingActionButton外层的FittedBox嵌套，你当前用SizedBox已经明确指定了容器尺寸，直接将FloatingActionButton放在SizedBox内即可，无需额外适配缩放，避免FittedBox带来的尺寸计算延迟：

floatingActionButton: SizedBox(
  height: 85.0,
  width: 85.0,
  child: FloatingActionButton(
    // 原有FAB配置保持不变
  ),
)

• 如果必须保留FittedBox逻辑，可在页面首帧渲染完成后触发一次轻量刷新，在页面对应的State类的initState方法中添加如下代码：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (mounted) setState(() {});
  });
}

• 也可以手动指定BottomAppBar的缺口边距参数，强制预留裁剪空间：

bottomNavigationBar: BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 8, // 可根据FAB尺寸自行调整数值，默认值为4
  // 原有配置保持不变
)

如果不想修改代码，直接将Flutter SDK升级到3.13.0及以上稳定版即可，官方已在后续版本中推送了该问题的修复补丁。

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