Flutter中如何实现页面平滑切换？Navigator路由跳转异常咨询

问题背景 #

我有三个页面：页面1、页面2、页面3。想从页面2切换到页面3，但现在用「先Navigator.pop(context)关闭页面2，再Navigator.push跳页面3」的方式，会短暂显示页面1，体验很差。想问能不能用「先push页面3再pop页面2」的方式解决？

下面是我试了但不符合预期的代码：

Navigator.push(
  context,
  MaterialPageRoute<Widget>(
    builder: (context) => widget,
  ),
);
Navigator.pop(context);

直接结论 #

先push再pop的方式行不通，因为Flutter的导航操作是异步队列执行的，你写的代码会把push和pop都塞进队列，但实际执行时，pop会先完成（把页面2弹掉，页面1出来），之后push才完成跳转到页面3，还是会看到页面1闪现。

正确的实现方式 #

有两种靠谱的方法可以实现「页面2直接切到页面3，不显示页面1」：

方法1：用Navigator.pushReplacement #

这个方法会直接用页面3替换当前的页面2，页面栈变成「页面1 → 页面3」，完全不会出现页面1：

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => Page3()),
);

方法2：用命名路由的Navigator.popAndPushNamed #

如果你的项目用了命名路由配置，用这个方法更简洁，它会原子性地完成「弹出当前页面+push新页面」的操作，不会有中间状态：

Navigator.popAndPushNamed(context, '/page3');

补充说明 #

为什么先push再pop不行？因为Flutter的Navigator方法都是异步的，调用push后不会立刻完成页面跳转，只是把操作加入导航队列。紧接着调用pop，这个操作也会进队列，而且会先于push的完成执行，导致页面2先被弹出，页面1显示，之后push才完成跳转到页面3，所以还是会有页面1的闪现问题。

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