用OpenSpec和Cursor生成Flutter标准化的JSON实体类

没有机器猫的大雄
0 阅读4分钟

相信做Flutter开发的同学们都遇到过一个问题，如何将后端接口文档中的JSON数据自动生成Dart实体类。

目前我使用过的方式有如下几种：

  1. 开发工具的插件，例如： FlutterJsonBeanFactory/Json2Dart Safe Convert
  2. 在线生成工具,例如：app.quicktype.io/?l=dart
  3. Flutter pub库，例如：json_serializable

但是这几种方式都有一些待优化的点，比如：

  1. 会生成中间类，生成实体类的过程不可控，除非下载插件到本地修改
  2. 需要手动调整，需要耗费时间，也会有出错的可能
  3. 团队内创建的实体类标准不一致

现在想实现一种快捷，过程可控，并且团队内代码完全一致的标准化Flutter实体类生成工具，该如何实现呢？最近发现了一种新的思路：OpenSpec + Cursor

Cursor就不过多介绍了，相信很多人都已经相当熟悉了。下边简单介绍一下OpenSpec

官网地址：github.com/Fission-AI/…

官方描述： OpenSpec aligns humans and AI coding assistants with spec-driven development so you agree on what to build before any code is written. No API keys required.

我对于OpenSpec的简单定义就是：AI工具的约束

下面看一下具体的使用方法~

一、环境搭建&初始化项目

1.命令行输入

npm install -g @fission-ai/openspec@latest

2.安装完毕后，输入openspec --version,看到版本号就是安装成功了

openspec --version

3.进入到项目的根目录下，执行openspec init，可以看到下方画面

openspec init

11.jpg 4.选择你自己的开发工具后进行初始化工作，如图

22.jpg

5.最后看到如下输出就代表OpenSpec初始化完成，重启开发工具即可正常使用

44.jpg

6.OpenSpec会自动在项目的根目录创建openspec路径，并在路径中创建相关文件

Openspec生成目录.png

project.md - 对于当前项目的描述，包括：技术栈，代码风格，上下文，测试策略等等，可以帮助AI理解你的项目

AGENTS.md - OpenSpec的工作流介绍和命令行语法

changes文件夹 - 当你用AI创建执行任务后，每一个任务产生的proposal，task和spec文件会自动创建在该文件夹内

spec文件夹 - 可以用来存放一些全局的自定义约束

二、具体使用

1.先简单通过AI对话框做了一个描述：

“我想要在项目的lib路径下创建一个model文件夹，在model文件夹下创建一个user.dart类 . 类的名称是UserModel，里面属性包含int类型的userid,String类型的name，int类型的age，并且这个类要包含JSON解析的相关函数，并且要创建一个copy方法”

2.OpenSpec会自动创建三个文件到刚刚的changes文件夹下，如图：

66.jpg

proposal.md - OpenSpec会对AI对话框内的需求进行详细拆解，按照顺序列出详细的需求点，并在该文件中展示，如图：

77.jpg

spec.md - OpenSpec会对需求中的点进行技术约束，如图：

spec99.jpg

tasks.md - OpenSpec会将该需求拆分成执行的开发任务和验证任务，之后按照顺序依次执行，并且通过spec.md文件进行严格的约束，如图：

task88.jpg

开发者可以先检查上边3个文件是否正确，如果正确的话可以在AI对话框内告诉AI确认生成即可，之后我们可以看到在对应的路径下生成了正确的实体类，如图：

999.jpg

截屏2026-01-18 10.19.47.png

上边的方法证明了OpenSpec已经可以正常使用，下面我们要继续优化任务。我们希望可以通过直接粘贴JSON数据，并且通过更少的描述让OpenSpec帮助我们生成实体类

三、通过全局约束文件统一创建任务 减少问题描述

1.打开Cursor的设置，创建一个自定义的AI Rule,如下图

image.png 2.自定义spec，更精准的让AI生成代码，如下图

image.png 在spec文件中你还可以让AI调用其他路径下的类，我就调用了util/路径下的safe_convert.dart中的函数
3.这样在使用时，就可以直接粘贴JSON到对话框，知名类名和文件名自动生成Dart的数据类了，如下图

image.png 生成的Dart数据类会自动导入使用的其他类,如下\

import 'package:zt_gemini/util/safe_convert.dart';

  factory VoiceModelConfigItem.fromJson(Map<String, dynamic> json) {
    return VoiceModelConfigItem(
      title: safe2String(json['title']),//内部调用其他的方法
      content: safe2String(json['content']),//内部调用其他类的方法
    );
  }

团队多人开发时只要共享两个文件（1.自定义的Rule文件 2.执行步骤的spec文件）就可以实现所有人统一标准的Dart实体类。如果需要自定义语义可以修改rule文件，如果需要修改实现步骤、实体类字段明明逻辑、注释等可以修改spec文件。

以上就是用Cursor+OpenSpec自动生成flutter JSON实体类的方法，各位可以多多交流，有北京的flutter岗位也可以帮忙内推~

avatar
文章
阅读
粉丝