Skip to content

edlose16b/flutter_jsonschema_builder

Folders and files

NameName
Last commit message
Last commit date
Jan 29, 2023
Mar 24, 2023
Mar 24, 2023
Oct 29, 2021
Oct 29, 2021
Oct 29, 2021
Sep 1, 2022
Sep 1, 2022
Jan 29, 2023
Mar 9, 2022
Mar 24, 2023
Mar 24, 2023

Repository files navigation

flutter_jsonschema_builder

A simple Flutter widget capable of using JSON Schema to declaratively build and customize web forms.
Inspired by react-jsonschema-form

Installation

Add dependency to pubspec.yaml

dependencies:
  ...
  flutter_jsonschema_builder: ^0.0.1+1

Run in your terminal

flutter packages get

See the File Picker Installation for file fields.

Usage

import 'package:flutter_jsonschema_builder/flutter_jsonschema_builder.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);
      },
    ),
  );
}

image

Using arrays & Files

  final json = '''
{
  "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
```dart

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

image

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';
    }
  }
},

image

TODO

  • Add all examples
  • OnChanged
  • References
  • pub.dev