animation - 如何使用 Flutter 更改导航动画

Question

在 Flutter 中导航到/从页面时，有什么方法可以更改默认动画？

Answer 1

您可以使用 PageRouteBuilder。

以下示例显示导航到第二个屏幕时的 FadeTransition。

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => Page2(),
    transitionDuration: Duration(seconds: 2),
    transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
  ),
);

---

如果您使用 go_router :

GoRoute(
  path: '/page2',
  pageBuilder: (_, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: Page2(),
      transitionDuration: Duration(seconds: 2),
      transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
    );
  },
)

然后:

context.go('/page2');