json_form

A Flutter widget capable of using JSON Schema to declaratively build and customize input forms.

Inspired by react-jsonschema-form.

Table of Contents

• Table of Contents
• Installation
• Examples
• Usage
  • Using arrays & Files
  • Using UI Schema
    • UI Schema Configurations
  • UI Config
  • Custom File Handler
  • Using Custom Validator
  • TODO

Installation

Add dependency to pubspec.yaml

dependencies:
  json_form: ^0.0.1+1

See the File Picker Installation for file fields.

Examples

You can interact with multiple form examples in the deployed web page. The code for the page can be found in the example folder of this repo.

Usage

import 'package:json_form/json_form.dart';

final jsonSchema = {
  "title": "A registration form",
  "description": "A simple form example.",
  "type": "object",
  "required": [
    "firstName",
    "lastName"
  ],
  "properties": {
    "firstName": {
      "type": "string",
      "title": "First name",
      "default": "Chuck"
    },
    "lastName": {
      "type": "string",
      "title": "Last name"
    },
    "telephone": {
      "type": "string",
      "title": "Telephone",
      "minLength": 10
    }
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: JsonForm(
      jsonSchema: jsonSchema,
      onFormDataSaved: (data) {
        inspect(data);
      },
    ),
  );
}

Using arrays & Files

final jsonSchema = '''
{
  "title": "Example 2",
  "type": "object",
  "properties": {
   "listOfStrings": {
      "type": "array",
      "title": "A list of strings",
      "items": {
        "type": "string",
        "title" : "Write your item",
        "default": "bazinga"
      }
    },
    "files": {
      "type": "array",
      "title": "Multiple files",
      "items": {
        "type": "string",
        "format": "data-url"
      }
    }
  }
}
''';

Using UI Schema

final uiSchema = '''
{
  "selectYourCola": {
    "ui:widget": "radio"
  }
}
''';

UI Schema Configurations

UI Config

Custom File Handler

customFileHandler: () => {
  'profile_photo': () async {
    return [
      File(
          'https://cdn.mos.cms.futurecdn.net/LEkEkAKZQjXZkzadbHHsVj-970-80.jpg')
    ];
  },
  '*': null,
}

Using Custom Validator

customValidatorHandler: () => {
  'selectYourCola': (value) {
    if (value == 0) {
      return 'Cola 0 is not allowed';
    }
  }
},

TODO

• Add all examples
• OnChanged
• pub.dev