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

Libraries

Action
AvaliableWidgetTypes
Controller
FileFieldValue
Icon
JSONCheckboxField
JSONDateTimeField
JSONFileField
JSONForeignkeyField
JSONForignKeyEditField
JSONForm
JSONManyToManyField
JSONSchemaForm
JSONSelectField
JSONTextFormField
LoadingDialog
ManyToManySelectionPage
NetworkProvider
OutlineButtonContainer
Schema
SelectionPage
json_schema_form
utils