{"id":15012906,"url":"https://github.com/juancastillo0/json_form","last_synced_at":"2026-02-23T18:04:55.837Z","repository":{"id":255771026,"uuid":"851920534","full_name":"juancastillo0/json_form","owner":"juancastillo0","description":"A Flutter widget capable of using JSON Schema to build and customize input forms.","archived":false,"fork":false,"pushed_at":"2025-04-08T22:21:41.000Z","size":22282,"stargazers_count":0,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T04:12:35.189Z","etag":null,"topics":["dart","flutter","forms","inputs","json-schema","json-schema-form","validator"],"latest_commit_sha":null,"homepage":"https://juancastillo0.github.io/json_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/juancastillo0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.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,"zenodo":null}},"created_at":"2024-09-03T23:10:55.000Z","updated_at":"2025-04-08T22:20:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"c17556da-2c4e-476a-8415-1454b137ed36","html_url":"https://github.com/juancastillo0/json_form","commit_stats":{"total_commits":206,"total_committers":5,"mean_commits":41.2,"dds":0.5728155339805825,"last_synced_commit":"419da37b91bb69f7bd4096f28c53cbd616af73d0"},"previous_names":["juancastillo0/json_form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/juancastillo0/json_form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fjson_form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fjson_form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fjson_form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fjson_form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juancastillo0","download_url":"https://codeload.github.com/juancastillo0/json_form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fjson_form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29749947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T07:44:07.782Z","status":"ssl_error","status_checked_at":"2026-02-23T07:44:07.432Z","response_time":90,"last_error":"SSL_read: 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":["dart","flutter","forms","inputs","json-schema","json-schema-form","validator"],"created_at":"2024-09-24T19:43:24.051Z","updated_at":"2026-02-23T18:04:55.788Z","avatar_url":"https://github.com/juancastillo0.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![Code coverage Coveralls](https://coveralls.io/repos/github/juancastillo0/json_form/badge.svg?branch=main)](https://coveralls.io/github/juancastillo0/json_form?branch=main)\n[![Code coverage Codecov](https://codecov.io/gh/juancastillo0/json_form/branch/main/graph/badge.svg?token=QJLQSCIJ42)](https://codecov.io/gh/juancastillo0/json_form)\n[![Build \u0026 Test](https://github.com/juancastillo0/json_form/actions/workflows/melos-ci.yaml/badge.svg)](https://github.com/juancastillo0/json_form/actions/workflows/melos-ci.yaml)\n[![json_form is released under the MIT license.](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/juancastillo0/json_form/blob/main/LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing)\n\n\u003ch3 align=\"center\"\u003ejson_form\u003c/h3\u003e\n\nA [Flutter](https://flutter.dev/) widget capable of using [JSON Schema](https://json-schema.org/) to declaratively build and customize input forms.\n\nInspired by [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form).\n\n\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Installation](#installation)\n- [Examples](#examples)\n- [Usage](#usage)\n - [JsonSchema Types](#jsonschema-types)\n - [String](#string)\n - [Enum, Selects and Checkboxes](#enum-selects-and-checkboxes)\n - [Object](#object)\n - [Arrays \\\u0026 Files](#arrays--files)\n - [File Picker Handlers](#file-picker-handlers)\n - [Custom Validators](#custom-validators)\n - [Custom Select Picker Handlers](#custom-select-picker-handlers)\n - [Definitions (`$defs`) and References (`$ref`)](#definitions-defs-and-references-ref)\n - [`dependencies` and `oneOf`](#dependencies-and-oneof)\n - [UI Schema](#ui-schema)\n - [Example](#example)\n - [Individual `ui:\u003cpropertyName\u003e`](#individual-uipropertyname)\n - [Grouped `ui:options`](#grouped-uioptions)\n - [Nested properties](#nested-properties)\n - [UI Schema Configurations](#ui-schema-configurations)\n - [UI Config](#ui-config)\n - [Custom Widget Builders](#custom-widget-builders)\n - [Form Sections](#form-sections)\n - [Buttons](#buttons)\n - [Localization (l10n) and Internationalization (i18n)](#localization-l10n-and-internationalization-i18n)\n - [TODO](#todo)\n\n\n## Installation\n\nAdd dependency to pubspec.yaml\n\n```\ndependencies:\n json_form: ^0.0.1+1\n```\n\nSee the [File Picker Installation](https://github.com/miguelpruivo/flutter_file_picker) for file fields.\n\n\n## Examples\n\nYou can interact with multiple form examples in the [deployed web page](https://juancastillo0.github.io/json_form/). The code for the page can be found in the [example folder of this repo](./example/lib/main.dart).\n\n![Primitives Example in Github Page](images/json_form_primitives_examples_page.png)\n\n## Usage\n\n`JsonForm` is mhe main Widget exposed by the package. You can use it by providing a [Json Schema](https://json-schema.org/) formatted `String` with all the fields and their configurations as shown in this example:\n\n```dart\nimport 'package:json_form/json_form.dart';\n\nfinal jsonSchema = '''\n{\n \"title\": \"A registration form\",\n \"description\": \"A simple form example.\",\n \"type\": \"object\",\n \"required\": [\n \"firstName\",\n \"lastName\"\n ],\n \"properties\": {\n \"firstName\": {\n \"type\": \"string\",\n \"title\": \"First name\",\n \"default\": \"Chuck\"\n },\n \"lastName\": {\n \"type\": \"string\",\n \"title\": \"Last name\"\n },\n \"telephone\": {\n \"type\": \"string\",\n \"title\": \"Telephone\",\n \"minLength\": 10\n }\n }\n}\n''';\n\n@override\nWidget build(BuildContext context) {\n return Scaffold(\n body: JsonForm(\n jsonSchema: jsonSchema,\n onFormDataSaved: (data) {\n inspect(data);\n },\n ),\n );\n}\n```\n\n![Usage example](./images/usage_example.png)\n\n### JsonSchema Types\n\nSupported types include:\n\n- [string](#string)\n- number \n- integer\n- boolean\n- null\n- files (string with data-url format)\n- object\n- array\n\n#### String\n\nDepending on the [\"format\" configured for the \"string\" type in the Json Schema](https://json-schema.org/understanding-json-schema/reference/string#format)\nthe widget or settings for the text field will be configured. The following are the supported formats:\n\n - \"email\" and \"uri\" set the format within the text field\n - \"date-time\" and \"date\" will present a text field with buttons for configuring the date and time using MaterialUI's dialogs.\n - \"time\" validate the input using the RegExp `^[0-9]{2}:[0-9]{2}(:[0-9]{2})?$`\n - \"data-url\" for [file pickers](#arrays--files)\n\n#### Enum, Selects and Checkboxes\n\nEnumerations can be used for any of the primitive types (string, number, integer, boolean) by setting the \"enum\" property within the Json Schema object with the list of variants or options. A select or single-value dropdown will be presented.\n\nFor presenting a multi-select or checkbox you may use an array and configuring the \"enum\" property within the \"items\" object of the array. You may use the `uniqueItems` JsonSchema property for the array and the `ui:widget` [UISchema property](#ui-schema) equal to `checkboxes` for further customization.\n\n#### Object\n\n#### Arrays \u0026 Files\n\nWithin the [Json Schema](https://json-schema.org/) specification, you may specify a `List` with the Json type \"array\" within the configuration.\nFiles can be configured using the Json type \"string\" with a format \"data-url\".\n\n```dart\nfinal jsonSchema = '''\n{\n \"title\": \"Example 2\",\n \"type\": \"object\",\n \"properties\": {\n \"listOfStrings\": {\n \"type\": \"array\",\n \"title\": \"A list of strings\",\n \"items\": {\n \"type\": \"string\",\n \"title\" : \"Write your item\",\n \"default\": \"bazinga\"\n }\n },\n \"files\": {\n \"type\": \"array\",\n \"title\": \"Multiple files\",\n \"items\": {\n \"type\": \"string\",\n \"format\": \"data-url\"\n }\n }\n }\n}\n''';\n```\n\n#### File Picker Handlers\n\nIf you use a field of Json type \"string\" and format \"data-url\" for file inputs fields, you have to provide a way of selecting files when a user taps in the \"Add\" file button:\n\n```dart\nimport 'package:cross_file/cross_file.dart';\n\nfieldFilePicker: (JsonFormField\u003cObject?\u003e field) {\n if (field.key == 'fieldName') {\n // return a specific file handler for the \"fieldName\" input\n }\n // return the default file handler\n return () async {\n return [\n XFile(\n 'https://cdn.mos.cms.futurecdn.net/LEkEkAKZQjXZkzadbHHsVj-970-80.jpg',\n ),\n ];\n };\n}\n```\n\nThe returned values will be used as the output value when submitting or saving the form.\n\n#### Custom Validators\n\nYou may provide a custom validator for each field:\n\n```dart\nfieldValidator: (JsonFormField\u003cObject?\u003e field) {\n if (field.key == 'fieldName') {\n return (value) {\n if (value == '2') return 'The value cannot be 2'\n return null;\n };\n }\n return null;\n}\n```\n\n\n#### Custom Select Picker Handlers\n\n#### Definitions (`$defs`) and References (`$ref`)\n\n#### `dependencies` and `oneOf`\n\n// TODO: fieldSelectPicker docs\n\n\n### UI Schema\n\nAnother parameter of the `JsonForm` widget is the `uiSchema` Json `String`. By providing an `uiSchema` you may configure different UI parameters \nsuch as helper texts and the \"widget\" or presentations used for the specific field.\n\n#### Example\n\nThe code example results in the following image:\n\n![UI Schema example](./images/ui_schema_example.png)\n\n```dart\nfinal jsonSchema = '''\n{\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"int\": {\n \"type\": \"integer\",\n \"minimum\": 2,\n \"maximum\": 5,\n \"ui:options\": {\n \"title\": \"Title in config\"\n }\n }\n }\n}\n''';\n\nfinal uiSchema = '''\n{\n \"name\": {\n \"ui:help\": \"The name helper text\",\n \"ui:options\": {\n \"placeholder\": \"NAME PLACEHOLDER\"\n }\n },\n \"int\": {\n \"ui:widget\": \"range\"\n }\n}\n''';\n\nWidget build(BuildContext context) {\n return JsonForm(\n jsonSchema: jsonSchema,\n uiSchema: uiSchema,\n );\n}\n```\n\nIn the example you may find the following ways of configuring properties.\n\n#### Individual `ui:\u003cpropertyName\u003e`\n\nCan be used within the uiSchema. \nIn the example:\n- `\"ui:help\": \"The name helper text\",`\n- `\"ui:widget\": \"range\"`\n\n#### Grouped `ui:options`\n\nCan be used within the jsonSchema o in the uiSchema. In both, you don't need to provide the `ui:` prefix.\n\nIn the example within the `uiSchema`:\n\n```json\n\"ui:options\": {\n \"placeholder\": \"NAME PLACEHOLDER\"\n}\n```\n\nIn the example within the `jsonSchema`:\n\n```json\n\"ui:options\": {\n \"title\": \"Title in config\"\n}\n```\n\n#### Nested properties\n\nYou can specify the properties within the json schema object for the property that you want to modify or as a nested\nproperty within the uiSchema.\n\n\n#### UI Schema Configurations\n\nThis table has all the configurations implemented within a UI Schema. These properties can be configured using \n`ui:\u003cpropertyName\u003e` and `ui:options` as explained in the previous sections.\n\n| Configuration | Type | Default | Only For | Description |\n| --------------- | --------------- | ------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| title | String? | | | The user facing title of the field |\n| description | String? | | | The user facing description of the field |\n| globalOptions | UiSchemaData? | | | Applies the options to all children |\n| help | String? | | | Helper text for the user |\n| readOnly | bool | false | | Can't be updated, but will be sent |\n| disabled | bool | false | | Can't be updated and will not be sent |\n| hidden | bool | false | | Does not show or sends the value |\n| hideError | bool | false | | |\n| placeholder | String? | | text | The input's hint text |\n| emptyValue | String? | | text | Sent when the value is empty |\n| autoFocus | bool | false | | Focuses the input on rendering |\n| autoComplete | bool | false | text | Enabled auto complete suggestions |\n| yearsRange | List\\\u003cint\\\u003e? | | date |\n| format | String | 'YMD' | date | |\n| hideNowButton | bool | false | date | |\n| hideClearButton | bool | false | date | |\n| widget | String? | | | The kind of input to be used. boolean: radio, select, checkbox (default). string: textarea, password, color, file. number: updown, range, radio. array: checkboxes. |\n| accept | String? | | file | The mime types accepted in the file input |\n| enumNames | List\\\u003cString\\\u003e? | | enum | The named or labels shown to the user for each of the enum variants |\n| enumDisabled | List\\\u003cString\\\u003e? | | enum | List of enum values that are disabled |\n| width | double | | | The width in pixels of the input. If it's a global configuration it will be used as the width for the table input column |\n| order | List\\\u003cString\\\u003e? | | object | The order of the properties of an object |\n| inline | bool | false | checkboxes | Whether the checkboxes are positioned in a horizontal line |\n| addable | bool | true | array | Whether the user can add items to an array |\n| removable | bool | true | array | Whether the user can remove items from an array |\n| orderable | bool | true | array | Whether the user can reorder or move the items in an array |\n| copyable | bool | true | array | Whether the user can copy or duplicate the items in an array |\n\n\n### UI Config\n\nGlobal configuration for the UI of the form. Contains styles, texts, widget builders and other Flutter configurations such as `labelPosition` and `autovalidateMode`.\n\n```dart\nWidget build(BuildContext context) {\n final uiConfig = JsonFormUiConfig(\n subtitle: Theme.of(context).textTheme.titleMedium,\n labelPosition: LabelPosition.input,\n autovalidateMode: AutovalidateMode.onUnfocus,\n );\n \n return JsonForm(\n jsonSchema: jsonSchema,\n uiConfig: uiConfig,\n );\n}\n```\n\n| Configuration | Type | Default | Description |\n| -------------------------- | ------------------------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| title | TextStyle? | titleLarge | |\n| titleAlign | TextAlign? | center | |\n| subtitle | TextStyle? | titleMedium (bold) | |\n| description | TextStyle? | bodyMedium | |\n| fieldLabel | TextStyle? | | |\n| fieldInput | TextStyle? | | |\n| fieldInputReadOnly | TextStyle? | TextStyle(color: Colors.grey) | |\n| error | TextStyle? | bodySmall (colorScheme.error) | Text style for validation errors |\n| localizedTexts | LocalizedTexts | [English](./lib/src/utils/localized_texts.dart) | Translations of the standardized texts used within the form. For example, they are used for validation errors and buttons (add, remove, show, hide, ...) |\n| debugMode | bool | false | Shows an \"inspect\" button for debugging |\n| labelPosition | LabelPosition | table | The location of the input field labels. Options: side, top, table, input (InputDecoration) |\n| autovalidateMode | AutovalidateMode | onUserInteraction | The `Form`'s validation execution |\n| addItemBuilder | Widget? Function(VoidCallback onPressed, String key)? | | Add Item button for arrays |\n| removeItemBuilder | Widget? Function(VoidCallback onPressed, String key)? | | Remove Item button for arrays |\n| copyItemBuilder | Widget? Function(VoidCallback onPressed, String key)? | | Duplicate or Copy Item button for arrays |\n| submitButtonBuilder | Widget? Function(VoidCallback onSubmit)? | Centered button inside the main scroll | The main Submit form button |\n| addFileButtonBuilder | Widget? Function(VoidCallback? onPressed, String key)? | | |\n| formBuilder | Form? Function(GlobalKey\\\u003cFormState\\\u003e formKey, Widget child)? | 12 of padding over the form | Builds the Form widget you can use it to wrap the whole form |\n| formSectionBuilder | Widget? Function(Widget child)? | Left border over a section | Wraps a form section. Objects and arrays create form sections |\n| titleAndDescriptionBuilder | Widget? Function(SchemaUiInfo info)? | Adds a divider for form sections and top padding for table titles | Returns the title and description widget for a schema. Used within a form section for objects and arrays, and for fields when using `LabelPosition.table` |\n| fieldWrapperBuilder | Widget? Function(FieldWrapperParams params)? | Side and top field labels | Wraps the input field and returns it with the label |\n| inputWrapperBuilder | Widget? Function(FieldWrapperParams params)? | | Wraps the input field and returns it without the label |\n\n\n#### Custom Widget Builders\n\nThey allow you to customize the visualization of certain sections and buttons of your form.\n\n##### Form Sections\n\nThe `formBuilder` can be used to Instantiate Flutter's `Form` widget with you own parameters:\n\n```dart\nformBuilder: (GlobalKey\u003cFormState\u003e formKey, Widget child) {\n return Form(\n key: _formKey,\n canPop: false,\n onChanged: () {\n print('Form changed');\n },\n child: Padding(\n padding: const EdgeInsets.all(12.0),\n child: Column(\n children: [\n Text('Form Title'),\n Expanded(child: child),\n ], \n ),\n ),\n );\n}\n```\n\nOther builders that allow you to change the rendering of distinct form and field sections include:\n `formSectionBuilder`, `titleAndDescriptionBuilder`, `fieldWrapperBuilder` and `inputWrapperBuilder`.\n\n##### Buttons\n\n- Arrays: You can change the buttons that add, remove and copy array items.\n- Form: The `submitButtonBuilder` allows you to render a custom \"Submit\" button for the whole `JsonForm`.\n- Files: The addFileButtonBuilder. // TODO: other file buttons\n\n#### Localization (l10n) and Internationalization (i18n)\n\nYou can create a new instance that implements the `LocalizedTexts` class. By default, it contains English translations\nfor the text presented within the form such as validation error messages and button labels or tooltips.\n\n```dart\nclass SpanishLocalizedTexts extends LocalizedTexts {\n const SpanishLocalizedTexts();\n\n /// Used to display the error message when a required field is empty\n @override\n String required() =\u003e 'Requerido';\n\n /// Used when a [String] is too short.\n @override\n String minLength({required int minLength}) =\u003e\n 'Debería tener al menos $minLength caracteres';\n\n /// ... override other methods\n}\n\nfinal uiConfig = JsonFormUiConfig(\n localizedTexts: Localizations.localeOf(context).languageCode == 'es'\n ? const SpanishLocalizedTexts()\n : null,\n);\n```\n\n### TODO\n\n- [ ] pub.dev\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuancastillo0%2Fjson_form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuancastillo0%2Fjson_form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuancastillo0%2Fjson_form/lists"}