{"id":32268304,"url":"https://github.com/maxmeng93/flutter_json_gen_form","last_synced_at":"2026-02-21T08:02:09.114Z","repository":{"id":246723052,"uuid":"817584059","full_name":"maxmeng93/flutter_json_gen_form","owner":"maxmeng93","description":"Generate Flutter forms using JSON","archived":false,"fork":false,"pushed_at":"2024-07-10T08:04:07.000Z","size":559,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-23T22:34:44.758Z","etag":null,"topics":["flutter","form-generator","json"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/json_gen_form","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxmeng93.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG-zh.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-20T03:21:02.000Z","updated_at":"2024-07-10T08:03:12.000Z","dependencies_parsed_at":"2024-07-10T09:45:32.271Z","dependency_job_id":null,"html_url":"https://github.com/maxmeng93/flutter_json_gen_form","commit_stats":null,"previous_names":["maxmeng93/flutter_json_gen_form"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/maxmeng93/flutter_json_gen_form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxmeng93%2Fflutter_json_gen_form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxmeng93%2Fflutter_json_gen_form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxmeng93%2Fflutter_json_gen_form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxmeng93%2Fflutter_json_gen_form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxmeng93","download_url":"https://codeload.github.com/maxmeng93/flutter_json_gen_form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxmeng93%2Fflutter_json_gen_form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29676981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","form-generator","json"],"created_at":"2025-10-22T22:11:45.008Z","updated_at":"2026-02-21T08:02:09.108Z","avatar_url":"https://github.com/maxmeng93.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eJSON_GEN_FORM\u003c/h1\u003e\n\u003cp\u003e使用json来生成flutter表单，内置多种表单控件，\u003cbr/\u003e支持验证、自定义布局、自定义样式、表单无限分组嵌套等\u003c/p\u003e\n\n[English](./README.md) · 中文\n\n![](./screenshots/json_gen_form.gif)\n\n\u003c/div\u003e\n\n## 功能\n\n- 使用 json 渲染表单\n- 表单验证\n- 自定义表单样式\n- 自定义布局（row, col）\n- 表单无限分组嵌套（group）\n- 通过方法修改整个表单值或单个表单控件值\n- 表单控件\n  - 文本框\n  - 密码框\n  - 多行文本框\n  - 数字\n  - 单选框\n  - 复选框\n  - 下拉框\n  - 开关\n  - 多媒体上传\n  - 日期选择\n  - 时间选择\n  - 日期时间选择\n\n## 使用\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:json_gen_form/json_gen_form.dart';\n\nvoid main() {\n  runApp(const MainApp());\n}\n\nclass MainApp extends StatefulWidget {\n  const MainApp({super.key});\n\n  @override\n  State\u003cMainApp\u003e createState() =\u003e _MainAppState();\n}\n\nclass _MainAppState extends State\u003cMainApp\u003e {\n  final GlobalKey _key = GlobalKey\u003cJsonGenFormState\u003e();\n  final List\u003cdynamic\u003e _data = [\n    {\n      \"type\": \"text\",\n      \"field\": \"name\",\n      \"label\": \"姓名\",\n      \"value\": \"隔壁老王\",\n      \"placeholder\": \"请输入姓名\",\n      \"rules\": [\n        {\"required\": true, \"message\": \"请输入姓名\"}\n      ]\n    },\n    {\n      \"type\": \"textarea\",\n      \"field\": \"remark\",\n      \"label\": \"自我介绍\",\n      \"value\": null,\n      \"placeholder\": \"请简单介绍一下你自己\",\n      \"rules\": []\n    },\n    {\n      \"type\": \"number\",\n      \"field\": \"age\",\n      \"label\": \"年龄\",\n      \"value\": null,\n      \"placeholder\": \"请输入年龄\",\n      \"rules\": [\n        {\"required\": true, \"message\": \"请输入年龄\"},\n        {\"min\": 18, \"message\": \"年龄必须大于18岁\"}\n      ]\n    }\n  ];\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      theme: ThemeData(\n        brightness: Brightness.light,\n        useMaterial3: true,\n      ),\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('json gen form'),\n        ),\n        body: SafeArea(\n          child: SingleChildScrollView(\n            physics: const BouncingScrollPhysics(),\n            padding: const EdgeInsets.symmetric(\n              horizontal: 20.0,\n              vertical: 20.0,\n            ),\n            child: Column(\n              children: [\n                JsonGenForm(\n                  key: _key,\n                  config: _data,\n                  decoration: JsonGenFormDecoration(\n                    // groupLabelWrap: (Widget child, dynamic data) {\n                    //   return Container(\n                    //     margin: const EdgeInsets.only(bottom: 5),\n                    //     child: child,\n                    //   );\n                    // },\n                    controlLabelWrap: (Widget child, dynamic data) {\n                      return Container(\n                        margin: const EdgeInsets.only(bottom: 5),\n                        child: child,\n                      );\n                    },\n                    controlWrap: (Widget child, dynamic data) {\n                      return Container(\n                        margin: const EdgeInsets.only(bottom: 10),\n                        child: child,\n                      );\n                    },\n                  ),\n                ),\n                ElevatedButton(\n                  onPressed: () async {\n                    final formState = _key.currentState as JsonGenFormState;\n                    try {\n                      final data = await formState.validate();\n                      debugPrint('表单验证成功: $data');\n                    } catch (e) {\n                      debugPrint('表单验证失败: $e');\n                    }\n                  },\n                  child: const Text('提交'),\n                ),\n              ],\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n## 通用参数\n\n除 `group`、`row`、`col` 外，其他类型都有以下通用参数。所有类型都有 `extra`。\n\n| 字段        | 描述     | 类型    | 默认值 | 必填 |\n| ----------- | -------- | ------- | ------ | ---- |\n| type        | 类型     | String  | ''     | true |\n| field       | 字段名   | String  | ''     | true |\n| label       | 标签     | String  | -      | -    |\n| hiddenLabel | 隐藏标签 | bool    | false  | -    |\n| value       | 默认值   | dynamic | -      | -    |\n| disabled    | 是否禁用 | bool    | false  | -    |\n| readonly    | 是否只读 | bool    | false  | -    |\n| rules       | 校验规则 | List    | []     | -    |\n| extra       | 额外参数 | dynamic |        | -    |\n\n## 表单类型\n\n### group 分组\n\n| 字段        | 描述     | 类型      | 默认值  | 必填 |\n| ----------- | -------- | --------- | ------- | ---- |\n| type        | 类型     | String    | 'group' | true |\n| field       | 字段名   | String    | ''      | -    |\n| label       | 标签     | String    | ''      | -    |\n| hiddenLabel | 隐藏标签 | bool      | ''      | -    |\n| children    | 子表单   | List\u003cMap\u003e | []      | -    |\n\n### text 文本框\n\n| 字段        | 描述 | 类型   | 默认值 | 必填 |\n| ----------- | ---- | ------ | ------ | ---- |\n| type        | 类型 | String | 'text' | true |\n| placeholder | 提示 | String | -      | -    |\n| 通用参数    | -    | -      | -      | -    |\n\n### password 密码框\n\n| 字段        | 描述 | 类型   | 默认值     | 必填 |\n| ----------- | ---- | ------ | ---------- | ---- |\n| type        | 类型 | String | 'password' | true |\n| placeholder | 提示 | String | -          | -    |\n| 通用参数    | -    | -      | -          | -    |\n\n### textarea 多行文本框\n\n| 字段        | 描述 | 类型   | 默认值     | 必填 |\n| ----------- | ---- | ------ | ---------- | ---- |\n| type        | 类型 | String | 'textarea' | true |\n| placeholder | 提示 | String | -          | -    |\n| 通用参数    | -    | -      | -          | -    |\n\n### number 数字\n\n| 字段        | 描述 | 类型   | 默认值   | 必填 |\n| ----------- | ---- | ------ | -------- | ---- |\n| type        | 类型 | String | 'number' | true |\n| placeholder | 提示 | String | -        | -    |\n| 通用参数    | -    | -      | -        | -    |\n\n### radio 单选框\n\n| 字段                | 描述         | 类型      | 默认值       | 必填 |\n| ------------------- | ------------ | --------- | ------------ | ---- |\n| type                | 类型         | String    | 'radio'      | true |\n| options             | 选项         | List\u003cMap\u003e | []           | -    |\n| direction           | 选项排列方向 | String    | 'horizontal' | -    |\n| itemHorizontalSpace | 选项水平间距 | double    | 16           | -    |\n| itemVerticalSpace   | 选项垂直间距 | double    | 8            | -    |\n| 通用参数            | -            | -         | -            | -    |\n\n### checkbox 复选框\n\n| 字段                | 描述         | 类型      | 默认值       | 必填 |\n| ------------------- | ------------ | --------- | ------------ | ---- |\n| type                | 类型         | String    | 'checkbox'   | true |\n| options             | 选项         | List\u003cMap\u003e | []           | -    |\n| direction           | 选项排列方向 | String    | 'horizontal' | -    |\n| itemHorizontalSpace | 选项水平间距 | double    | 16           | -    |\n| itemVerticalSpace   | 选项垂直间距 | double    | 8            | -    |\n| 通用参数            | -            | -         | -            | -    |\n\n### select 下拉框\n\n| 字段     | 描述     | 类型      | 默认值   | 必填 |\n| -------- | -------- | --------- | -------- | ---- |\n| type     | 类型     | String    | 'select' | true |\n| options  | 选项     | List\u003cMap\u003e | []       | -    |\n| multiple | 是否多选 | bool      | false    | -    |\n| 通用参数 | -        | -         | -        | -    |\n\n### switch 开关\n\n| 字段     | 描述 | 类型   | 默认值   | 必填 |\n| -------- | ---- | ------ | -------- | ---- |\n| type     | 类型 | String | 'switch' | true |\n| 通用参数 | -    | -      | -        | -    |\n\n### media 多媒体上传\n\n| 字段      | 描述                          | 类型   | 默认值  | 必填 |\n| --------- | ----------------------------- | ------ | ------- | ---- |\n| type      | 类型                          | String | 'media' | true |\n| mediaType | 媒体类型(media、image、video) | String | 'media' | -    |\n| multiple  | 是否多选                      | bool   | false   | -    |\n| 通用参数  | -                             | -      | -       | -    |\n\n#### ios 配置 info.plist\n\n```\n\u003ckey\u003eNSCameraUsageDescription\u003c/key\u003e\n\u003cstring\u003e需要摄像头拍照或扫码\u003c/string\u003e\n\u003ckey\u003eNSPhotoLibraryUsageDescription\u003c/key\u003e\n\u003cstring\u003e需要从图库选择照片或视频\u003c/string\u003e\n\u003ckey\u003eNSMicrophoneUsageDescription\u003c/key\u003e\n\u003cstring\u003e录制视频需要访问麦克风\u003c/string\u003e\n```\n\n#### android 配置 AndroidManifest.xml\n\n```\n\u003cuses-permission android:name=\"android.permission.CAMERA\" /\u003e\n```\n\n### date 日期选择\n\n| 字段 | 描述 | 类型   | 默认值 | 必填 |\n| ---- | ---- | ------ | ------ | ---- |\n| type | 类型 | String | 'date' | true |\n\n### time 时间选择\n\n| 字段 | 描述 | 类型   | 默认值 | 必填 |\n| ---- | ---- | ------ | ------ | ---- |\n| type | 类型 | String | 'time' | true |\n\n### datetime 日期时间选择\n\n| 字段 | 描述 | 类型   | 默认值     | 必填 |\n| ---- | ---- | ------ | ---------- | ---- |\n| type | 类型 | String | 'datetime' | true |\n\n## 布局类型\n\n### row 行\n\n`row` 的 `children` 的 `type` 必须为 `col`。\n\n| 字段     | 描述       | 类型   | 默认值 | 必填 |\n| -------- | ---------- | ------ | ------ | ---- |\n| type     | 类型       | String | 'row'  | true |\n| gutter   | 子元素间距 | double | 0      | -    |\n| children | 子元素列表 | List   | []     | -    |\n\n### col 列\n\n`col` 的父元素必须为 `row`。\n\n| 字段  | 描述       | 类型   | 默认值 | 必填 |\n| ----- | ---------- | ------ | ------ | ---- |\n| type  | 类型       | String | 'col'  | true |\n| flex  | 空间大小   | int    | 1      | -    |\n| child | 子元素配置 | Map    |        |      |\n\n### group 分组\n\n| 字段  | 描述   | 类型   | 默认值  | 必填 |\n| ----- | ------ | ------ | ------- | ---- |\n| type  | 类型   | String | 'group' | true |\n| field | 字段名 | String | null    | -    |\n\n## 验证规则\n\n- required 必填\n- type 快捷校验类型，仅支持文本输入框\n  - email 邮箱\n  - url 网址\n- min string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度\n- max string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度\n- len string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度\n- pattern 正则校验\n- message 错误提示信息\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxmeng93%2Fflutter_json_gen_form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxmeng93%2Fflutter_json_gen_form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxmeng93%2Fflutter_json_gen_form/lists"}