Flutter如何实现go_router页面动画

在Flutter中使用go_router进行路由跳转时，如何自定义页面切换动画？官方文档提到可以通过CustomTransitionPage实现，但实际操作时发现动画效果不生效。想请教具体实现步骤：1）如何正确配置过渡动画类型（如渐隐、滑动等）？2）是否需要配合AnimatedWidget使用？3）是否有完整的示例代码可以参考？目前尝试在PageRouteBuilder中设置动画，但和go_router结合时总是报错。

2 回复

在Flutter中使用go_router实现页面动画，可通过CustomTransitionPage自定义过渡效果，例如淡入淡出或滑动动画。在GoRoute的pageBuilder中设置transitionDuration和transitionsBuilder即可。

更多关于Flutter如何实现go_router页面动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用go_router实现页面动画，可以通过自定义CustomTransitionPage来实现。以下是具体步骤和示例代码：

实现步骤

  1. 定义动画参数：在GoRoute的pageBuilder中返回CustomTransitionPage。
  2. 设置过渡动画：使用transitionsBuilder定义进入和退出动画。
  3. 配置动画时长：通过transitionDuration设置动画持续时间。

示例代码

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: const HomePage(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          // 从左向右滑动进入
          return SlideTransition(
            position: animation.drive(
              Tween<Offset>(
                begin: const Offset(-1.0, 0.0),
                end: Offset.zero,
              ).chain(CurveTween(curve: Curves.easeInOut)),
            ),
            child: child,
          );
        },
        transitionDuration: const Duration(milliseconds: 300),
      ),
    ),
    GoRoute(
      path: '/details',
      pageBuilder: (context, state) => CustomTransitionPage(
        key: state.pageKey,
        child: const DetailsPage(),
        transitionsBuilder: (context, animation, secondaryAnimation, child) {
          // 渐变进入
          return FadeTransition(
            opacity: animation,
            child: child,
          );
        },
      ),
    ),
  ],
);

常用动画类型

  1. 滑动动画：SlideTransition
  2. 渐变动画：FadeTransition
  3. 缩放动画：ScaleTransition
  4. 旋转动画：RotationTransition

注意事项

  • 可通过secondaryAnimation实现页面退出动画
  • 使用CurvedAnimation调整动画曲线
  • 嵌套多个动画可使用Stack或组合过渡组件

通过这种方式，你可以灵活地为不同页面配置个性化的转场动画效果。

回到顶部