Flutter中FloatingActionButton不显示问题的排查及解决方案

• 问题现象：在Scaffold组件内创建的FloatingActionButton（FAB）完全不可见，也无法触发点击事件；控制台无任何报错信息，Scaffold的body区域显示正常。已排除颜色对比度问题（FAB为绿色背景、黑色图标，Scaffold背景为白色）。

• 排查尝试：先后尝试调整颜色对比度、降级Flutter版本，均未解决问题。

• 最终解决方案：将包含底部导航栏的主页面Scaffold的extendBody属性设置为false（默认值）后，FAB恢复正常显示和点击功能。

• 问题原理：当Scaffold的extendBody设为true且配置了bottomNavigationBar或persistentFooterButtons时，body会延伸至Scaffold的最底部，而不是截止到导航栏上方，这会导致FAB被底部导航栏区域遮挡，从而出现不可见且无法点击的情况。

相关代码示例 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: const Center(child: Text("Hello Products")),
    floatingActionButton: FloatingActionButton(
      backgroundColor: KColors.primary,
      onPressed: (){KLoggerHelper.debug("FAB is here");},
      child: const Icon(Iconsax.add, color: KColors.black),
    ),
  );
}

环境信息 #

Flutter 3.24.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5874a72aa4（5周前）• 2024-08-20 16:46:00 -0500
Engine • revision c9b9d5780d
Tools • Dart 3.5.1 • DevTools 2.37.2

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