如何使用 go_router 包将过渡动画应用到 .go 函数

Question

我正在使用 go_router 包，因为我需要它提供的深层链接。我将动画过渡应用于某些路线，但它们是静态的，因此每次我转到该路线时，都会触发相同的动画。当我这样做时我想改变动画GoRouter.of(context).go('/inbox')

这就是我现在所拥有的：

final router = GoRouter(
  initialLocation: '/inbox',
  routes: <GoRoute>[
    GoRoute(
      path: '/inbox',
      pageBuilder: (BuildContext context, GoRouterState state) {
        return PageTransition.slideFromRight(
          myChildWidget: Layout(
            context: context,
            state: state,
            child: EmailPage(),
          ),
          state: state,
        );
      },
    ),
    GoRoute(
      path: '/email/inbox/:id',
      pageBuilder: (BuildContext context, GoRouterState state) {
        return PageTransition.slideFromLeft(
          myChildWidget: Layout(
            context: context,
            state: state,
            child: const EmailDetailsPage(),
          ),
          state: state,
        );
      },
    ),
    GoRoute(
      path: '/menu',
      pageBuilder: (BuildContext context, GoRouterState state) {
        return PageTransition.slideFromRight(
          myChildWidget: Layout(
            context: context,
            state: state,
            child: const MenuPage(),
          ),
          state: state,
        );
      },
    )
  ],
);

PageTransition 只是我构建的一个自定义转换小部件。

因此，在这种情况下，如果我GoRouter.of(context).go('/inbox')这样做，它将播放slideFromRight过渡，如果我这样做，GoRouter.of(context).go('/email/inbox/:id')它将播放slideFromLeft，并且我无法更改它。我希望它是动态的并选择要播放的动画。

Answer 1

go_router提供CustomTransitionPage过渡动画。

代码：

GoRoute(
  path: 'details',
  pageBuilder: (context, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: DetailsScreen(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // Change the opacity of the screen using a Curve based on the the animation's
        // value
        return FadeTransition(
          opacity:
              CurveTween(curve: Curves.easeInOutCirc).animate(animation),
          child: child,
        );
      },
    );
  },
),

参考： https: //github.com/flutter/packages/blob/main/packages/go_router/example/lib/transition_animations.dart