json_schema_form 1.1.7+3

Flutter

A JSON Schema form. This widget will provide you a simple way to generate form from JSON Schema.

Flutter JSON Form #

Flutter test codecov

You can download the macos app in the release page!

Setup #

Before you use this plugin, you need to setup your ios/android project inorder to use file field(File upload).

Reference this page to setup.

Introduction #

This is the plugin for flutter using JSON Schema to define the form itself. It supports:

  • Textfield
  • Selection Field
  • foreignkey Field
  • qrcode scanning
  • Checkbox Field
  • DateTime Field
  • custom field icon and action
  • ManyToMany Field
  • File Field

Getting start #

Important! The foreign key field is using Django Rest Framework with DRF-schema-adapter. All the schema's structures are based on it. You can take a look what the structure is on this page

First prepare data #

Map<String, dynamic> itemJSONData = {
  "fields": [
    {
      "label": "ID",
      "readonly": true,
      "extra": {},
      "name": "id",
      "widget": "number",
      "required": false,
      "translated": false,
      "validations": {}
    },
    {
      "label": "Item Name",
      "readonly": false,
      "extra": {"help": "Please Enter your item name", "default": ""},
      "name": "name",
      "widget": "text",
      "required": true,
      "translated": false,
      "validations": {
        "length": {"maximum": 1024}
      }
    }]

put the data into JSONSchemaForm #


JSONSchemaForm(
                schema: (snapshot.data['fields'] as List)
                    .map((s) => s as Map<String, dynamic>)
                    .toList(),
                icons: [
                  FieldIcon(schemaName: "name", iconData: Icons.title),
                ],
                actions: [
                  FieldAction(
                      schemaName: "qr_code",
                      actionTypes: ActionTypes.qrScan,
                      actionDone: ActionDone.getInput)
                ],
                onSubmit: (value) {
                  print(value);
                },
              ),

As you can see, you can provide actions and icons based on the name property in the schema's data.

More tutorials #

read more on this

3
likes
60
pub points
58%
popularity

A JSON Schema form. This widget will provide you a simple way to generate form from JSON Schema.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

sirily1997@gmail.com

License

BSD (LICENSE)

Dependencies

barcode_scan, dio, file_picker_cross, flutter, image_picker, permission_handler, progress_indicators, provider

More

Packages that depend on json_schema_form