PageTransitionType动画首次跳转不生效问题修复咨询

问题描述 #

打开应用后首次跳转至其他页面时，PageTransitionType.fade动画未生效，但再次点击同一页面进行跳转时，动画可正常显示。请问该如何修复此问题？

问题代码 #

return Container(
  width: MediaQuery.of(context).size.width,
  height: 35,
  alignment: Alignment.bottomRight,
  child: TextButton(
    child: const Text(
      "Wachtwoord vergeten?",
      style: TextStyle(color: Colors.white70),
      textAlign: TextAlign.right,
    ),
    onPressed: () => Navigator.of(context).push(PageTransition(
        child: ResetPassword,
        type: PageTransitionType.fade)))
);

当前代码 #

Widget forgetPassword(BuildContext context) {
  return Container(
    width: MediaQuery.of(context).size.width,
    height: 35,
    alignment: Alignment.bottomRight,
    child: TextButton(
      child: const Text(
        "Wachtwoord vergeten?",
        style: TextStyle(color: Colors.white70),
        textAlign: TextAlign.right,
      ),
      onPressed: () => Navigator.of(context).push(PageTransition(
          child: widget,
          type: PageTransitionType.fade)))
  );
}

修复方案 #

1. 修正目标页面实例化 #

当前代码中child: widget是错误写法，问题代码里的child: ResetPassword如果是Widget类名而非实例，也会导致异常。必须传递实例化的Widget对象，比如把目标页面改为ResetPassword()：

onPressed: () => Navigator.of(context).push(PageTransition(
    child: ResetPassword(), // 实例化目标页面
    type: PageTransitionType.fade,
    duration: const Duration(milliseconds: 500) // 显式添加动画时长
))

2. 显式指定动画时长 #

首次跳转时，默认动画时长可能因页面初始化未完成而不生效，显式设置duration参数可以确保动画正常触发。

3. 更新page_transition包版本 #

如果使用的是旧版本page_transition，可能存在首次跳转的动画bug，在pubspec.yaml中更新到最新版本后执行flutter pub get即可。

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