在 Flutter 中为 go_router 设置默认过渡

Question

如the docs from go_router所述，很容易设置pageBuilder-单个页面的过渡。但是，我想为 所有页面设置默认的 PageTransition。

如何在 Flutter 中设置默认页面过渡 with/for go_router？

单页：


  // this is the proposed method to do it for single pages
  // how can i apply it to all pages without writing the same code?
  GoRoute(
      path: '/login',
      builder: (context, state) => const LoginScreen(),
      pageBuilder: (context, state) => CustomTransitionPage<void>(
        key: state.pageKey,
        child: const LoginScreen(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) =>
            FadeTransition(opacity: animation, child: child),
      ),
    ),

此致

Answer 1

go_router 包目前不支持此功能，但为了减少代码重复，您可以创建一个辅助函数，为您的路线应用自定义转换，例如：

CustomTransitionPage<T> buildPageWithDefaultTransition({
  required BuildContext context, 
  required GoRouterState state, 
  required Widget child,
}) {
  return CustomTransitionPage<T>(
    key: state.pageKey,
    child: child,
    transitionsBuilder: (context, animation, secondaryAnimation, child) => 
      FadeTransition(opacity: animation, child: child),
  );
}

<...>

GoRoute(
  path: '/login',
  builder: (context, state) => const LoginScreen(),
  pageBuilder: (context, state) => buildPageWithDefaultTransition<void>(
    context: context, 
    state: state, 
    child: LoginScreen(),
  ),
),

Answer 2

更正确的做法是继承自CustomTransitionPage。

class WebPage extends CustomTransitionPage {
  WebPage({
    LocalKey key,
    ... // other properties taken from `MaterialPage`
    required Widget child
  }) : super(
         key: key,
         transitionBuilder: (...) {
           return FadeTransition(...);
         }
         child: child, // Here you may also wrap this child with some common designed widget
       );
}

然后

GoRoute(
  path: '/login',
  builder: (context, state) => const LoginScreen(),
  pageBuilder: (context, state) => WebPage(
    key: state.pageKey,
    child: const LoginScreen(),
  ),
),

在 Flutter 中为 go_router 设置默认过渡

Set default transition for go_router in Flutter

navigation

animation

transition

flutter

gorouter