flutter_jsonschema_builder

Description:

flutter jsonschema builder

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
copied to clipboard
Run in your terminal
flutter packages get
copied to clipboard
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);
},
),
);
}
copied to clipboard

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

copied to clipboard

Custom File Handler #
customFileHandler: () => {
'profile_photo': () async {

return [
File(
'https://cdn.mos.cms.futurecdn.net/LEkEkAKZQjXZkzadbHHsVj-970-80.jpg')
];
},
'*': null
}
copied to clipboard
Using Custom Validator #
customValidatorHandler: () => {
'selectYourCola': (value) {
if (value == 0) {
return 'Cola 0 is not allowed';
}
}
},
copied to clipboard

TODO #

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