Flutter高效路由管理插件routingkit的使用

简介

RoutingKit 是一个轻量级且快速的 Dart 路由库。它可以帮助你在 Flutter 应用中高效地管理路由。

安装

使用 Dart

dart pub add routingkit

使用 Flutter

flutter pub add routingkit

使用方法

创建路由器实例并插入路由

首先，你需要创建一个路由器实例，并向其中添加路由。

import 'package:routingkit/routingkit.dart';

void main() {
  final router = createRouter<String>();

  addRoute(router, 'GET', '/path', 'static route');
  addRoute(router, 'POST', '/path/:name', 'name route');
  addRoute(router, 'GET', '/path/foo/**', 'wildcard route');
  addRoute(router, 'GET', '/path/foo/**:name', 'named wildcard route');

  // 匹配路由并访问匹配的数据
  print(findRoute(router, 'GET', '/path')); // => { data: static route }
  print(findRoute(router, 'POST', '/path/cady')); // => { data: name route, params: {name: cady} }
  print(findRoute(router, 'GET', '/path/foo/bar/baz')); // => { data: wildcard route, params: {_: bar/baz} }
  print(findRoute(router, 'GET', '/path/foo/bar/baz/qux')); // => { data: named wildcard route, params: {name: bar/baz/qux} }
  print(findRoute(router, 'GET', '/')); // => null, not found.
}

匹配路由以访问匹配的数据

你可以使用 findRoute 方法来匹配路由并获取匹配的数据和参数。

// 匹配静态路径
print(findRoute(router, 'GET', '/path')); // => { data: static route }

// 匹配带有参数的路径
print(findRoute(router, 'POST', '/path/cady')); // => { data: name route, params: {name: cady} }

// 匹配通配符路径
print(findRoute(router, 'GET', '/path/foo/bar/baz')); // => { data: wildcard route, params: {_: bar/baz} }

// 匹配命名通配符路径
print(findRoute(router, 'GET', '/path/foo/bar/baz/qux')); // => { data: named wildcard route, params: {name: bar/baz/qux} }

// 不匹配的路径
print(findRoute(router, 'GET', '/')); // => null, not found.

完整示例

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 RoutingKit 进行路由管理。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RoutingKit Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final router = createRouter<String>();

  HomeScreen() {
    addRoute(router, 'GET', '/home', 'Home Screen');
    addRoute(router, 'GET', '/profile/:username', 'Profile Screen');
    addRoute(router, 'GET', '/settings', 'Settings Screen');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RoutingKit Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                _navigate(context, '/home');
              },
              child: Text('Go to Home'),
            ),
            ElevatedButton(
              onPressed: () {
                _navigate(context, '/profile/user123');
              },
              child: Text('Go to Profile'),
            ),
            ElevatedButton(
              onPressed: () {
                _navigate(context, '/settings');
              },
              child: Text('Go to Settings'),
            ),
          ],
        ),
      ),
    );
  }

  void _navigate(BuildContext context, String path) {
    final result = findRoute(router, 'GET', path);
    if (result != null) {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => RouteScreen(
            title: result.data,
            params: result.params,
          ),
        ),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Route not found')),
      );
    }
  }
}

class RouteScreen extends StatelessWidget {
  final String title;
  final Map<String, String> params;

  RouteScreen({required this.title, required this.params});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Params:'),
            ...params.entries.map((entry) => Text('${entry.key}: ${entry.value}'))
          ],
        ),
      ),
    );
  }
}

许可证

RoutingKit 是开源软件，许可证为 MIT License。

希望这个示例能帮助你更好地理解和使用 RoutingKit 进行 Flutter 应用的路由管理。如果你有任何问题或建议，欢迎在评论区留言！