route_tree_flutter #

route_tree_flutter 是一个用于简化在 Flutter 应用中使用 route_tree 的工具。它提供了一个函数 makeRouteFactory，可以简化路由配置，而无需向主包添加额外依赖。

示例代码

以下是一个完整的示例，展示如何使用 route_tree_flutter 来管理路由。

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:route_tree/parser.dart'; // 导入路由解析器
import 'package:route_tree/route_tree.dart'; // 导入路由树库
import 'package:route_tree_flutter/route_tree_flutter.dart'; // 导入路由树 Flutter 插件

// 主应用入口
void main() => runApp(FlutterRouteTreeExampleApp());

// 自定义应用组件
class FlutterRouteTreeExampleApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'route_tree 示例',
      theme: ThemeData(primarySwatch: Colors.blue), // 设置主题颜色
      initialRoute: "/", // 初始路由
      onGenerateRoute: makeRouteFactory<dynamic>(
        // 使用 makeRouteFactory 配置路由
        pageRouteBuilder: (widget, settings) => MaterialPageRoute<dynamic>(
          // 定义页面路由生成器
          builder: (context) => widget,
          settings: settings,
        ),
        createAnonymousRoute: () => const NoScreenFoundScreen(), // 未找到路由时的默认页面
        routeTree: Segment.root<Widget>( // 根路由配置
          create: (context) => const HomeScreen(), // 默认首页
          createError: (context) => NoScreenFoundScreen(uri: context.uri), // 路由错误处理
          children: [
            Segment.path( // 第一级路径配置
              name: "users", // 路径名称
              create: (context) => const ListUsersScreen(), // 用户列表页
              children: [
                Segment.param( // 带参数的子路径配置
                  parser: const UintParser("userId"), // 参数解析器
                  create: (context) => UserDetailScreen(id: context["userId"] as int), // 用户详情页
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// 首页组件
class HomeScreen extends StatelessWidget {
  const HomeScreen();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ListTile(
            title: const Text("用户 ID 列表"),
            onTap: () => Navigator.of(context).pushNamed("/users"), // 导航到用户列表页
          ),
        ],
      ),
    );
  }
}

// 用户列表页组件
class ListUsersScreen extends StatelessWidget {
  const ListUsersScreen();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 10, // 模拟 10 个用户
        itemBuilder: (context, i) => ListTile(
          title: Text("用户 $i"),
          onTap: () => Navigator.of(context).pushNamed("/users/$i"), // 导航到用户详情页
        ),
      ),
    );
  }
}

// 用户详情页组件
class UserDetailScreen extends StatelessWidget {
  const UserDetailScreen({required this.id});

  final int id;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("用户详情页，ID: $id"), // 显示用户 ID
      ),
    );
  }
}

// 未找到路由时的默认页面
class NoScreenFoundScreen extends StatelessWidget {
  const NoScreenFoundScreen({this.uri});

  final Uri? uri;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("未找到路由: $uri"), // 显示未找到的路由
      ),
    );
  }
}