Flutter抽屉页面切换异常：旧页面短暂显示并伴随Surface错误

核心问题原因 #

1. 抽屉关闭与页面跳转的时序冲突：点击抽屉项时直接调用Get.to()，抽屉的关闭动画和页面跳转动画会同时执行，导致之前的页面在抽屉关闭过程中短暂暴露。
2. Surface渲染异常：控制台输出的E/Surface: getSlotFromBufferLocked: unknown buffer属于Android底层渲染层面的警告，通常是页面切换时Surface资源释放/复用不及时，和路由动画、视图层级冲突有关。

针对性修复方案 #

方案1：调整抽屉关闭与页面跳转的顺序 #

点击抽屉项时先关闭抽屉，再执行页面跳转，避免两个动画冲突。修改抽屉项的点击逻辑：

drawerItem(context, () async {
  // 先关闭抽屉
  Navigator.of(context).pop();
  // 短暂延迟确保抽屉完全关闭（可根据实际效果调整时长）
  await Future.delayed(const Duration(milliseconds: 80));
  Get.to(() => ProfileScreen());
}, "Hesabım", Icons.person),

方案2：排查GetX路由配置问题 #

如果调整时序后问题仍存在，尝试替换Get.to()为Flutter原生路由跳转，验证是否是GetX路由的动画或栈管理导致的问题：

Navigator.of(context).push(MaterialPageRoute(builder: (_) => ProfileScreen()));

如果原生路由正常，建议检查GetX的路由配置（比如自定义过渡动画），尝试禁用过渡动画测试：

Get.to(() => ProfileScreen(), transition: Transition.noTransition);

方案3：缓解Surface渲染警告 #

这个警告一般不影响功能，但如果想减少日志输出，可以尝试：

• 升级Flutter SDK到最新稳定版本（修复底层渲染bug）。
• 简化页面中的嵌套视图结构，避免自定义Surface相关组件。

完整修改后的代码示例 #

@override
Widget build(BuildContext context) {
  return Drawer(
    child: ListView(
      children: [
        //Drawer Header
        //Drawer Body
        Container(
          padding: const EdgeInsets.only(left: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              drawerItem(context, () async {
                Navigator.of(context).pop();
                await Future.delayed(const Duration(milliseconds: 80));
                Get.to(() => ProfileScreen());
              }, "Hesabım", Icons.person),
              drawerItem(context, () async {
                Navigator.of(context).pop();
                await Future.delayed(const Duration(milliseconds: 80));
                Get.to(() => MyAdress());
              }, "Adreslerim", Icons.location_on_sharp),
            ],
          ),
        ),
      ],
    ),
  );
}

GestureDetector drawerItem(
    BuildContext context, VoidCallback onTap, String? a, IconData icon) {
  return GestureDetector(
    onTap: onTap,
    child: ListTile(
      leading: Icon(icon, color: Colors.black54),
      title: Text(
        a.toString(),
        style: TextStyle(color: Colors.black54),
      ),
    ),
  );
}

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