Flutter内容管理系统插件impaktfull_cms的使用

impaktfull_cms

一个简单的CMS UI库，让您在几分钟内而不是几天内创建管理界面。

声明

impaktfull_cms仍处于不稳定且未经测试的状态。所有版本低于1.0.0的内容不应被使用，除非您想测试它。

目的

此CMS库旨在通过最少的代码快速创建管理界面。与其花费数天时间构建CRUD界面，您可以使用几分钟的时间创建一个功能齐全的管理面板。

主要特性：

• 可配置的数据表格
• 内置分页
• 表单生成
• 排序和过滤
• 响应式设计

演示

在线Web演示

使用方法

快速开始

步骤 1: 创建数据模型类

// 定义一个简单的数据模型类
class User {
  final String name;
  final String email;

  User({required this.name, required this.email});
}

步骤 2: 实现CmsConfig

// 配置数据表的列和操作
import 'package:impaktfull_cms/impaktfull_cms.dart';

class UserCmsConfig extends CmsConfig<User> {
  [@override](/user/override)
  List<CmsColumn> get columns => [
        CmsColumn.text(
          label: 'Name',
          field: (user) => user.name,
        ),
        CmsColumn.text(
          label: 'Email',
          field: (user) => user.email,
        ),
      ];

  [@override](/user/override)
  List<CmsAction> get actions => [
        CmsAction.edit(),
        CmsAction.delete(),
      ];
}

步骤 3: 使用CmsListScreen显示数据

// 主应用文件
import 'package:flutter/material.dart';
import 'package:impaktfull_cms/impaktfull_cms.dart';
import 'user_model.dart';
import 'user_config.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('impaktfull_cms 示例')),
        body: CmsListScreen<User>(
          config: UserCmsConfig(),
          dataProvider: (filter, sort, page) async {
            // 模拟数据源
            return Future.value([
              User(name: 'Alice', email: 'alice@example.com'),
              User(name: 'Bob', email: 'bob@example.com'),
            ]);
          },
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码，展示了如何使用impaktfull_cms插件来创建一个简单的用户管理界面。

// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:impaktfull_cms/impaktfull_cms.dart';
import 'user_model.dart';
import 'user_config.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('impaktfull_cms 示例')),
        body: CmsListScreen<User>(
          config: UserCmsConfig(),
          dataProvider: (filter, sort, page) async {
            // 模拟数据源
            return Future.value([
              User(name: 'Alice', email: 'alice@example.com'),
              User(name: 'Bob', email: 'bob@example.com'),
            ]);
          },
        ),
      ),
    );
  }
}