flutter_jsonschema_builder 0.0.1+1 copy "flutter_jsonschema_builder: ^0.0.1+1" to clipboard
flutter_jsonschema_builder: ^0.0.1+1 copied to clipboard

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

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
6
likes
65
pub points
41%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

extended_masked_text, flutter, intl

More

Packages that depend on flutter_jsonschema_builder