json_schema_form 1.1.9+2

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

Flutter JSON Form

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