Flutter路由扩展插件fx_go_router_ext的使用

fx_go_router_ext 是一个 Flutter 路由扩展插件，旨在简化 GoRouter 的使用并提供一些额外的功能。通过 fx_go_router_ext，你可以更容易地管理和导航路由，同时还可以获得一些额外的工具和功能来增强你的路由管理体验。

安装

首先，你需要在 pubspec.yaml 文件中添加 fx_go_router_ext 依赖：

dependencies:
  flutter:
    sdk: flutter
  go_router: ^6.0.0
  fx_go_router_ext: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本使用

1. 初始化 GoRouter 并使用 fx_go_router_ext

   在你的 main.dart 文件中，初始化 GoRouter 并使用 fx_go_router_ext 提供的扩展功能。

   import 'package:flutter/material.dart';
   import 'package:go_router/go_router.dart';
   import 'package:fx_go_router_ext/fx_go_router_ext.dart';
   
   void main() {
     final GoRouter router = GoRouter(
       routes: [
         GoRoute(
           path: '/',
           builder: (context, state) => const HomeScreen(),
         ),
         GoRoute(
           path: '/details',
           builder: (context, state) => const DetailsScreen(),
         ),
       ],
     );
   
     runApp(MyApp(router: router));
   }
   
   class MyApp extends StatelessWidget {
     final GoRouter router;
   
     const MyApp({required this.router, Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp.router(
         routerConfig: router,
         routeInformationParser: router.routeInformationParser,
         routerDelegate: router.routerDelegate,
       );
     }
   }
   
   class HomeScreen extends StatelessWidget {
     const HomeScreen({Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Home')),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               context.go('/details');
             },
             child: const Text('Go to Details'),
           ),
         ),
       );
     }
   }
   
   class DetailsScreen extends StatelessWidget {
     const DetailsScreen({Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Details')),
         body: const Center(
           child: Text('Details Screen'),
         ),
       );
     }
   }
   

2. 使用 fx_go_router_ext 的扩展功能

   fx_go_router_ext 提供了一些扩展功能，例如：

   • context.fxGo: 一个简化的导航方法，允许你更方便地进行路由跳转。
   • context.fxGoNamed: 通过路由名称进行导航。
   • context.fxPop: 简化的返回上一页操作。

   例如，你可以在 HomeScreen 中使用 context.fxGo 来跳转到 DetailsScreen：

   class HomeScreen extends StatelessWidget {
     const HomeScreen({Key? key}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: const Text('Home')),
         body: Center(
           child: ElevatedButton(
             onPressed: () {
               context.fxGo('/details');
             },
             child: const Text('Go to Details'),
           ),
         ),
       );
     }
   }
   

高级功能

fx_go_router_ext 还提供了一些高级功能，例如：

• 路由守卫: 你可以在路由跳转前执行一些逻辑，例如检查用户是否登录。
• 路由动画: 你可以自定义路由跳转时的动画效果。
• 路由参数传递: 你可以更方便地在路由之间传递参数。

示例：路由守卫

以下是一个简单的路由守卫示例，检查用户是否登录：

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

void main() {
  final GoRouter router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const HomeScreen(),
      ),
      GoRoute(
        path: '/details',
        builder: (context, state) => const DetailsScreen(),
        onEnter: (context, state) {
          // 检查用户是否登录
          if (isUserLoggedIn()) {
            return true;
          } else {
            context.fxGo('/login');
            return false;
          }
        },
      ),
      GoRoute(
        path: '/login',
        builder: (context, state) => const LoginScreen(),
      ),
    ],
  );

  runApp(MyApp(router: router));
}

bool isUserLoggedIn() {
  // 模拟用户登录状态
  return false;
}

class MyApp extends StatelessWidget {
  final GoRouter router;

  const MyApp({required this.router, Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            context.fxGo('/details');
          },
          child: const Text('Go to Details'),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Details')),
      body: const Center(
        child: Text('Details Screen'),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login')),
      body: const Center(
        child: Text('Please login'),
      ),
    );
  }
}