Flutter便捷功能插件Easy Go的使用

Easy Go

Easy Go 是一个强大的 Flutter 包，使页面之间的导航变得轻松。通过简单的 API，您可以轻松地在页面之间进行导航，并添加漂亮的动画和自定义过渡。

特性 GIF（来自项目）

特点

该包提供了多种功能来增强您的应用导航体验，例如：

• 支持自定义页面过渡和动画
• 提供一种简便的方法来为每个平台（iOS、Android、Web 等）设置过渡
• 内置动画，如滑动、淡入淡出和缩放
• 支持命名路由和自动路由生成
• 可以在页面之间传递数据
• 易于调试和测试

简单易用的 API 可以无缝集成到现有应用中。

开始使用

在 pubspec.yaml 文件中添加包：

dependencies:
  easy_go: latest_version

在 Dart 文件中导入包：

import 'package:easy_go/easy_go.dart';

在项目的根目录下运行以下命令来初始化包：

easy_go generate_enum -n NamedRoutes -p lib/src/generated/NamedRoutes.dart

这将在项目的根目录中创建一个名为 named_routes.dart 的文件。此文件将包含应用中的所有命名路由。您可以手动向此文件添加更多路由。

设置包

1. 将导航器键（Go.navigatorKey）传递给 MaterialApp 小部件：

MaterialApp(
  navigatorKey: Go.navigatorKey,
  home: const HomePage(),
),

1. 要使用命名路由，确保 named_routes.dart 已导入到 Dart 文件中。
2. 创建一个扩展 GoGenerator 的路由器生成类，为其每个路由提供定制。例如：

class RouterGenerator extends GoGenerator {
  @override
  Route<dynamic> goRoutes(RouteSettings settings) {
    final namedRoute = routerName(settings); /// 您必须包含这一行
    switch (namedRoute) {
      case NamedRoutes.home:
        return GoBuilder().build(
          const HomePage(),
          settings: settings,
          transition: TransitionType.fade,
        );
      case NamedRoutes.secondPage:
        return GoBuilder().build(
          const SecondPage(),
          settings: settings,
          transition: TransitionType.fade,
        );
      case NamedRoutes.thirdPage:
        return GoBuilder().build(const ThirdPage(), settings: settings);
      case NamedRoutes.fourthPage:
        return GoBuilder().build(const FourthPage(), settings: settings);
    }
  }

  @override
  Route<dynamic> undefineRoute() {
    return MaterialPageRoute(
      builder: (_) => const Scaffold(
        body: Center(
          child: Text('No route exists here! '),
        ),
      ),
    );
  }
}

1. 将路由器生成类传递给 MaterialApp 的 onGenerateRoute 参数：

MaterialApp(
  navigatorKey: Go.navigatorKey,
  onGenerateRoute: RouterGenerator().goRoutes,
  home: const HomePage(),
),

使用方法

一旦完成包的设置，您可以通过调用 Go 类的方法在应用中使用它。

简单的页面导航

TextButton(
  onPressed: () {
    /// 这将在当前页面和下一页之间创建淡入淡出过渡
    Go.to(const SecondPage(), transition: TransitionType.fade, options: FadeAnimationOptions());
  },
  child: Text('Go to page 2'),
),

在页面之间传递数据（使用命名路由）

TextButton(
  onPressed: () {
    /// 这将在当前页面和下一页之间创建淡入淡出过渡
    Go.toNamed(NamedRoutes.first, arguments: 'Hello World');
  },
  child: Text('Go to second'),
),

要在第二页获取数据，可以使用以下代码：

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final data = context.arguments;
    return Scaffold(
      body: Center(
        child: Text(data), /// 这将显示 'Hello World'
      ),
    );
  }
}

平台特定的过渡

默认情况下，Go 为每个平台（iOS、Android 和 Web）提供合适的过渡效果。

要为特定平台使用自定义过渡效果，可以在启动应用之前使用 GoBuilder 类。例如：

void main() {
  GoBuilder().initAppRouter(
    config: PlatformConfig(
      android: CustomPageRouterCreator(
        parentTransition: TransitionType.slide,
        parentOptions: const SlideAnimationOptions(
          direction: SlideDirection.topToBottom,
        ),
      ),
       /// ios: 添加 iOS 动画选项
       /// web: 添加 Web 动画选项
    ),
  );
  runApp(MyApp());
}