Flutter路径构建插件go_router_path_builder的使用

简介

go_router_path_builder 是一个用于生成 go_router 路径的 Flutter 包。它允许以函数式风格定义路径，从而避免字符串拼接时可能产生的错误。

入门指南

概述

虽然 Flutter 团队已经提供了强大的 go_router_builder 库来显式定义路由，但对于某些开发者来说实现步骤仍然较为复杂。此包通过另一种方法简化了这一过程。

其核心思想非常简单：与其使用 String 导航到某个位置（例如 context.go('/home/user/123/detail')），不如利用构建器并通过代码自动补全功能创建导航路径，从而避免拼写错误。

示例代码

导入与配置

首先，确保在 pubspec.yaml 中添加依赖项：

dependencies:
  go_router: any

dev_dependencies:
  build_runner: any
  go_router_path_builder: ^0.0.1

然后运行以下命令生成代码：

dart run build_runner build

或者在开发时监听文件变化：

dart run build_runner watch

配置路由

接下来，我们定义路由结构并生成路径。以下是完整的示例代码：

import 'dart:async';

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

part 'main.router.dart'; // 生成的路由文件名格式为 [source_file].router.dart

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: router, // 使用生成的 router 变量
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key});

  String title = 'Flutter Demo Home Page';

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String path = '';

  void _incrementCounter() {
    // 使用生成的路径构建器生成导航路径
    path = route.home.user(id: '123').detail.toString();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('当前路径：'),
            Text(path, style: Theme.of(context).textTheme.headlineMedium),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Generate Path',
        child: const Icon(Icons.add),
      ),
    );
  }
}

// 定义页面类
class UserPage extends StatelessWidget {
  final String id;
  final Object? extra;

  const UserPage({super.key, required this.id, this.extra});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User ID: $id')),
      body: Center(child: Text('This is User Page')),
    );
  }
}

// 定义路由结构
@GoRouterAnnotation(routeVariableName: 'route')
const _routes = [
  // 使用 RoutePathBuilder 创建路由
  RoutePathBuilder(
    'home',
    pageClassType: UserPage,
    routes: [
      RoutePathBuilder(
        'user',
        pathArguments: {'id'}, // 定义路径参数
        pageClassType: UserPage,
        routes: [
          RoutePathBuilder('detail', pageClassType: UserDetailPage), // 子路由
        ],
        extra: true, // 是否支持额外对象
      ),
    ],
    redirect: redirectHome, // 定义重定向逻辑
  ),
];

// 定义重定向函数
FutureOr<String?> redirectHome(BuildContext context, GoRouterState state) {
  return null; // 返回 null 表示不进行重定向
}

关键概念

RoutePathBuilder 和 RoutePathPageBuilder

• RoutePathBuilder: 用于生成 GoRoute 实例，通过 builder 作为页面构建器。
• pageClassType: 必填字段，指定页面类名称。
• pathArguments 和 arguments: 可选字段，用于定义路径参数或查询参数。
• extra: 如果需要传递额外对象，设置为 true。

RoutePathShellBuilder

• 用于生成 ShellRoute 实例。
• 支持直接映射 pageBuilder、onExit 和 redirect 等属性。

运行结果

运行上述代码后，点击按钮会动态生成路径 /home/user/123/detail 并显示在屏幕上。

注意事项

1. 路径参数
   如果路由有参数，则路径将变为函数形式，需传入实际值。

   final String location = route.home.user(id: '123').toString(); // 输出: /home/user/123

2. 无参数路径
   如果路由没有参数，则可以直接将其视为属性。

   final String location = route.home.toString(); // 输出: /home