Flutter功能未知插件PLEX的探索使用

PLEX 是一个专门为构建企业级应用程序而设计的Flutter UI框架。它为整个应用程序提供了健壮且可定制的基础，包括 main.dart 文件、路由、屏幕和其他基本组件的样板代码。

特性

• 创建应用程序的样板代码
• 内置登录界面
• 内置用户会话管理器
• 免费有用的小组件和工具函数
• 内置屏幕和页面
• 从模型类自动生成表单构建器
• 支持代码生成（例如 copy() 和 asString() 方法）
• 基于标签的依赖注入
• 支持MVVM模式，提供 PlexViewModel 来减少样板代码并增加有用的功能
• 简单集成 SignalR 到Flutter项目中

开始使用

在你的项目中安装 plex 插件：

dependencies:
  plex: ^version

运行以下命令以获取最新版本号：

flutter pub get

示例代码

下面是一个完整的示例，展示如何使用 PLEX 框架创建一个带有表格视图的企业级应用。

完整示例

import 'package:flutter/material.dart';
import 'package:plex/plex_package.dart';

void main() async {
  runApp(PlexApp(
    appInfo: PlexAppInfo(
      title: "Auto Backup",
      appLogo: const Icon(Icons.account_balance),
      appLogoDark: const Icon(Icons.account_balance, color: Colors.white),
      initialRoute: "/dashboard",
      versionCode: 1,
      versionName: "v1.0.0",
    ),
    useAuthorization: true,
    loginConfig: PlexLoginConfig(
      debugUsername: 'test',
      debugPassword: 'password',
      onLogin: (context, email, password) async {
        return AppUser.init(userName: "Abdur Rahman", email: "ar@mail.com");
      },
      userFromJson: (userData) {
        return AppUser.fromJson(userData);
      },
    ),
    dashboardConfig: PlexDashboardConfig(
      dashboardScreens: [
        PlexRoute(
          route: "/dashboard",
          category: "Tables",
          title: "Data Table Widget Usage",
          shortTitle: 'Data Table',
          logo: const Icon(Icons.account_balance_outlined),
          screen: (context) => PlexDataTable(
            enableSearch: true,
            enablePrint: true,
            onRefresh: () {
              getTableData();
            },
            headerTextStyle: const TextStyle(fontWeight: FontWeight.bold),
            headerBackground: Colors.redAccent,
            border: TableBorder.all(color: Colors.black12),
            columns: [
              PlexDataCell.text("Id"),
              PlexDataCell.text("First Name"),
              PlexDataCell.text("Last Name"),
              PlexDataCell.text("Emp Code"),
              PlexDataCell.text("Designation"),
              PlexDataCell.text("Grade"),
              PlexDataCell.text("Company"),
            ],
            rows: List.empty(), //getTableData(),
          ),
        ),
      ],
    ),
  ));
}

class AppUser extends PlexUser {
  late String email;
  late String userName;

  AppUser.init({required this.email, required this.userName});

  @override
  String? getPictureUrl() => "https://images.pexels.com/photos/631317/pexels-photo-631317.jpeg";

  @override
  String getLoggedInEmail() => email;

  @override
  String getLoggedInUsername() => userName;

  @override
  Map<String, dynamic> toJson() {
    final map = <String, dynamic>{};
    map['userName'] = userName;
    map['email'] = email;
    return map;
  }

  AppUser.fromJson(Map<String, dynamic> map) {
    userName = map["userName"];
    email = map["email"];
  }
}

表格数据生成函数

List<List<PlexDataCell>> getTableData() => [
  [
    PlexDataCell.text("1"),
    PlexDataCell.text("First"),
    PlexDataCell.text("Person"),
    PlexDataCell.text("EMP953312RT"),
    PlexDataCell.text("Software Engineer"),
    PlexDataCell.text("Grade"),
    PlexDataCell.custom(
      "First Company Pvt. Ltd",
      const DataCell(
        Text("First Company Pvt. Ltd", style: TextStyle(color: Colors.brown)),
      ),
    ),
  ],
  [
    PlexDataCell.text("2"),
    PlexDataCell.text("Second"),
    PlexDataCell.text("Person"),
    PlexDataCell.text("EMP95313RT"),
    PlexDataCell.text("Software Engineer"),
    PlexDataCell.text("Scale"),
    PlexDataCell.custom(
      "Second Company Pvt. Ltd",
      const DataCell(
        Text("Second Company Pvt. Ltd", style: TextStyle(color: Colors.green)),
      ),
    )
  ],
];