Flutter路由管理插件fluro的使用

Fluro 是Flutter中一个非常酷炫、功能丰富的路由管理库，它为Flutter应用提供了强大的路由导航能力。以下是关于如何使用Fluro进行路由管理的详细介绍。

Features

• Simple route navigation：简单的路由导航
• Function handlers：函数处理器（可以将路径映射到函数）
• Wildcard parameter matching：通配符参数匹配
• Querystring parameter parsing：查询字符串参数解析
• Common transitions built-in：内置常见的过渡效果
• Simple custom transition creation：简单创建自定义过渡效果
• Follows stable Flutter channel：遵循Flutter稳定通道
• Null-safety：空安全支持

Getting Started

定义路由器

首先，你需要创建一个FluroRouter对象：

final router = FluroRouter();

为了方便在应用程序的其他部分访问路由器，你可能希望将其存储为全局或静态变量。

定义路由和处理程序

接下来，定义你的路由和路由处理程序。例如：

var usersHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
  return UsersScreen(params["id"][0]);
});

void defineRoutes(FluroRouter router) {
  router.define("/users/:id", handler: usersHandler);

  // 也可以定义要使用的路由转换类型
  // router.define("users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
}

在上面的例子中，当路由为/users/1234时，路由器会拦截该请求并将应用程序导航到UsersScreen，同时传递参数1234给该页面。

导航

你可以通过MaterialApp.onGenerateRoute参数使用FluroRouter，具体做法是将FluroRouter.generator作为参数传递给onGenerateRoute属性：

MaterialApp(
  onGenerateRoute: router.generator,
  ...
)

之后，你可以像平常一样使用Navigator.push来导航，Flutter的路由机制会自动为你匹配路由。

如果你想手动推送路由，可以这样做：

router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);

类参数

如果你不想使用字符串作为参数，可以通过自定义RouteSettings传递参数：

/// 推送带有自定义RouteSettings的路由
FluroRouter.appRouter.navigateTo(
  context,
  'home',
  routeSettings: RouteSettings(
    arguments: MyArgumentsDataClass('foo!'),
  ),
);

/// 在Handler.handlerFunc中提取参数
var homeHandler = Handler(
  handlerFunc: (context, params) {
    final args = context.settings.arguments as MyArgumentsDataClass;

    return HomeComponent(args);
  },
);

示例项目

下面是一个完整的示例代码，展示了如何在Flutter应用中使用Fluro进行路由管理：

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

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

class MyApp extends StatelessWidget {
  final FluroRouter router = FluroRouter();

  MyApp() {
    defineRoutes(router);
  }

  void defineRoutes(FluroRouter router) {
    var usersHandler = Handler(
      handlerFunc: (BuildContext? context, Map<String, dynamic> params) {
        String userId = params['id']?.first ?? '';
        return UsersScreen(userId: userId);
      },
    );

    router.define('/users/:id', handler: usersHandler);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: router.generator,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pushNamed('/users/1234');
          },
          child: Text('Go to User Screen'),
        ),
      ),
    );
  }
}

class UsersScreen extends StatelessWidget {
  final String userId;

  UsersScreen({required this.userId});

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

这个例子展示了如何设置路由，并从主屏幕导航到用户屏幕，同时传递用户ID作为参数。希望这能帮助你更好地理解如何在Flutter应用中使用Fluro进行路由管理。