Flutter抽屉页面切换时旧页面短暂显示问题求助

问题原因分析 #

当前出现的旧页面闪现问题，核心是Drawer关闭动画与页面跳转动画冲突，再加上Get.to默认会把原页面保留在路由栈中，两种动画叠加后就造成了视觉上旧页面短暂显示的情况。

解决方案 #

1. 点击Drawer选项时，先关闭Drawer再执行页面跳转，避免动画冲突；
2. 若不需要保留原页面在路由栈中，用Get.off替换Get.to，彻底移除旧页面，从根源杜绝缓存导致的闪现。

修改后的代码 #

@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, () {
                // 先关闭Drawer
                Navigator.pop(context);
                // 用Get.off替换Get.to，移除当前页面
                Get.off(() => ProfileScreen());
              }, "Hesabım", Icons.person),
              drawerItem(context, () {
                Navigator.pop(context);
                Get.off(() => 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),
      ),
    ),
  );
}

额外说明 #

如果需要保留原页面在路由栈中（比如之后要返回），可以保留Get.to，但必须先关闭Drawer，还可以加个短暂延迟确保Drawer关闭动画完成：

drawerItem(context, () {
  Navigator.pop(context);
  Future.delayed(const Duration(milliseconds: 200), () {
    Get.to(() => ProfileScreen());
  });
}, "Hesabım", Icons.person),

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