【Flutter 必备插件】go_router 路由及其跳转动画封装

1.定义路由路径常量

class RoutePaths {
  static const String home = '/';
  static const String detail = '/detail';
}

2.创建路由处理器（页面映射）

import 'package:flutter/material.dart';
import '../pages/home_page.dart';
import '../pages/detail_page.dart';
import '../pages/not_found_page.dart';

class RouteHandlers {
  static Widget Function(BuildContext, GoRouterState) home =
      (context, state) => const HomePage();

  static Widget Function(BuildContext, GoRouterState) detail =
      (context, state) => DetailPage(id: state.queryParams['id'] ?? 'no-id');
}

3.封装 GoRouter 实例

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

class AppRouter {
  static final GoRouter router = GoRouter(
    routes: <RouteBase>[
      GoRoute(
        name: 'home',
        path: RoutePaths.home,
        builder: RouteHandlers.home,
      ),
      GoRoute(
        name: 'detail',
        path: RoutePaths.detail,
        builder: RouteHandlers.detail,
      ),
    ],
    errorBuilder: (context, state) => const NotFoundPage(),
  );
}

4.主入口使用封装后的 Router

import 'package:flutter/material.dart';
import 'routes/app_router.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: AppRouter.router,
      debugShowCheckedModeBanner: false,
    );
  }
}

5.页面传参

GoRouter.of(context).pushNamed(
  'detail',
  queryParams: {'id': '123'},
);

6.返回上一页

GoRouter.of(context).pop();

7.通过 redirect 来实现登录验证

GoRouter(
  redirect: (state) {
    final isLoggedIn = _checkIfLoggedIn();
    if (!isLoggedIn && state.subloc != RoutePaths.home) {
      return RoutePaths.home;
    }
    return null;
  },
  // ...
)

8.页面跳转动画（渐变、滑动、缩放）

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

class AppTransitions {
  static Page<T> buildSlideTransition<T>(GoRouterState state, Widget child) {
    return CustomTransitionPage<T>(
      key: state.pageKey,
      child: child,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(1.0, 0.0),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      },
    );
  }

  static Page<T> buildFadeTransition<T>(GoRouterState state, Widget child) {
    return CustomTransitionPage<T>(
      key: state.pageKey,
      child: child,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(opacity: animation, child: child);
      },
    );
  }

  static Page<T> buildScaleTransition<T>(GoRouterState state, Widget child) {
    return CustomTransitionPage<T>(
      key: state.pageKey,
      child: child,
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return ScaleTransition(
          scale: Tween<double>(begin: 0.8, end: 1.0).animate(animation),
          child: child,
        );
      },
    );
  }
}