Flutter多租户页面管理插件devaloop_tenant_page的使用

在本示例中，我们将展示如何使用 devaloop_tenant_page 插件来创建一个多租户页面。该插件可以帮助开发者快速搭建一个具有多租户功能的应用界面。

首先，确保你已经在项目的 pubspec.yaml 文件中添加了 devaloop_tenant_page 和 devaloop_group_item 依赖项：

dependencies:
  devaloop_tenant_page: ^x.x.x
  devaloop_group_item: ^x.x.x
  flutter:
    sdk: flutter

接下来，我们来看一下如何在项目中使用 TenantPage 组件。

示例代码

import 'package:devaloop_group_item/group_item.dart';
import 'package:devaloop_tenant_page/tenant_page.dart';
import 'package:flutter/material.dart';

// 定义Tenant类
class Tenant {
  final String id;
  final String name;
  final String detail;
  final String owner;
  final List<Staff> staff;

  Tenant({
    required this.id,
    required this.name,
    required this.detail,
    required this.owner,
    this.staff = const [],
  });
}

// 定义Staff类
class Staff {
  final String name;
  final String username;
  final int id;

  Staff({
    required this.name,
    required this.username,
    required this.id,
  });
}

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: TenantPage(
        // 设置页面标题
        title: '快速收银员',
        subtitle: '快速收银员',
        tenantCategoryName: '店铺',
        // 添加租户的回调函数
        addTenant: (tenant) {},
        // 获取租户列表的异步函数
        tenants: () async {
          await Future.delayed(const Duration(seconds: 5));
          return [
            Tenant(
              id: '001',
              name: '现代繁荣商店',
              detail: '厨房用具及家居用品店',
              owner: 'user@gmail.com',
              staff: [
                Staff(
                  name: 'Budi',
                  username: 'budi@gmail.com',
                  id: 1001,
                ),
              ],
            ),
            Tenant(
              id: '001',
              name: '永续商店',
              detail: '电器商店',
              owner: 'user2@gmail.com',
            ),
            Tenant(
              id: '001',
              name: '繁荣商店',
              detail: '五金工具店',
              owner: 'user@gmail.com',
            ),
          ];
        },
        // 当前登录用户的用户名和详情
        userName: 'user@gmail.com',
        userDetail: 'Google 账号',
        // 登出时的回调函数
        onLoggingOut: () {},
        // 租户所有者访问菜单
        ownerAccessMenu: (tenant) => [
          GroupContent(
            title: '报表',
            subtitle: '报表',
            leading: const Icon(Icons.summarize),
          ),
          GroupContent(
            title: '添加收银员',
            subtitle: '添加收银员',
            leading: const Icon(Icons.people),
          ),
        ],
        // 租户的通用菜单
        menu: (tenant) => [
          GroupItem(
            title: '交易',
            contents: [
              GroupContent(
                title: '销售',
                subtitle: '销售',
                leading: const Icon(Icons.sell),
              ),
            ],
          ),
          GroupItem(
            title: '库存',
            contents: [
              GroupContent(
                title: '库存',
                subtitle: '库存',
                leading: const Icon(Icons.warehouse),
              ),
            ],
          ),
        ],
        // 更新租户信息的回调函数
        updateTenant: (Tenant tenant) {},
        // 删除租户的回调函数
        removeTenant: (Tenant tenant) {},
      ),
    );
  }
}