Flutter动态路由管理插件flutter_dynamic_routing的使用

Flutter包，用于基于用户选择或应用程序状态启用动态路由。通过此包，您可以定义自定义工作流，以根据用户的选项控制导航路径。

flutter_dynamic_routing功能介绍

  • 使用自定义屏幕序列定义工作流。
  • 支持基于用户选择的动态导航。
  • 简单易用的API来设置路由和工作流。
  • 兼容各种导航类型。

完整示例

以下是如何使用Dynamic Routing包的完整示例。

运行示例

  1. 克隆此存储库：
git clone https://github.com/YoussifFathi/dynamic_routing_example.git

flutter_dynamic_routing开始使用及示例

要使用此包，请在pubspec.yaml文件中添加以下内容：

dependencies:
   dynamic_routing: ^1.0.0

然后在您的代码中初始化路由和工作流：

import 'package:flutter/material.dart';
import 'package:get/get.dart'; // 假设您正在使用 GetX 路由管理器
import 'dynamic_routing.dart'; // 导入动态路由包

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DynamicRoutingPage(),
    );
  }
}

class DynamicRoutingPage extends StatefulWidget {
  [@override](/user/override)
  _DynamicRoutingPageState createState() => _DynamicRoutingPageState();
}

class _DynamicRoutingPageState extends State<DynamicRoutingPage> {
  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化动态路由
    DynamicRouting.setRoutes(
      { 
        0: Routes.home, // 路由0是根路由，完成路径后会重定向到此
        1: Routes.screenOne,
        2: Routes.screenTwo,
        3: Routes.screenThree,
        4: Routes.screenFour,
        5: Routes.screenFive,
      },
      [
        WorkFlowModel(id: 1, screenSequence: [1, 2, 3]), // 工作流1
        WorkFlowModel(id: 2, screenSequence: [2, 4]),   // 工作流2
        WorkFlowModel(id: 3, screenSequence: [3, 4, 5]),// 工作流3
        WorkFlowModel(id: 4, screenSequence: [1, 2, 3, 4, 5]), // 工作流4
      ],
      (routeName) {
        Get.toNamed(routeName); // 使用GetX进行页面跳转
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Routing Example'),
      ),
      body: Center(
        child: Text('Dynamic Routing Initialized!'),
      ),
    );
  }
}

更多关于Flutter动态路由管理插件flutter_dynamic_routing的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动态路由管理插件flutter_dynamic_routing的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_dynamic_routing 是一个用于 Flutter 应用的动态路由管理插件，它允许你在运行时动态地添加、删除和更新路由。这对于需要根据用户权限、应用状态或其他条件动态调整导航结构的应用非常有用。

安装

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

dependencies:
  flutter:
    sdk: flutter
  flutter_dynamic_routing: ^1.0.0  # 请使用最新版本

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

基本用法

1. 初始化路由管理器

在你的 main.dart 文件中，初始化 DynamicRouting 并设置初始路由：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dynamic Routing Demo',
      initialRoute: '/',
      onGenerateRoute: DynamicRouting.onGenerateRoute,
    );
  }
}

2. 添加路由

你可以在应用的任何地方动态地添加路由。例如，在 HomePage 中添加一个新的路由：

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 动态添加路由
            DynamicRouting.addRoute(
              routeName: '/newPage',
              builder: (context) => NewPage(),
            );

            // 导航到新页面
            Navigator.pushNamed(context, '/newPage');
          },
          child: Text('Go to New Page'),
        ),
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Text('This is a dynamically added page!'),
      ),
    );
  }
}

3. 删除路由

你也可以在运行时删除路由：

DynamicRouting.removeRoute('/newPage');

4. 更新路由

如果你想更新一个已经存在的路由，可以重新添加它：

DynamicRouting.addRoute(
  routeName: '/newPage',
  builder: (context) => UpdatedNewPage(),
);

高级用法

1. 路由参数

你可以通过 arguments 传递参数到动态路由：

DynamicRouting.addRoute(
  routeName: '/newPage',
  builder: (context) => NewPage(),
);

Navigator.pushNamed(context, '/newPage', arguments: {'key': 'value'});

在目标页面中获取参数：

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Text('Received argument: ${args['key']}'),
      ),
    );
  }
}

2. 路由守卫

你可以使用 DynamicRouting 的 onGenerateRoute 来实现路由守卫，例如检查用户是否已登录：

DynamicRouting.onGenerateRoute = (settings) {
  if (settings.name == '/protectedPage' && !isLoggedIn) {
    return MaterialPageRoute(
      builder: (context) => LoginPage(),
    );
  }
  return DynamicRouting.defaultOnGenerateRoute(settings);
};
回到顶部