A simple Flutter widget capable of using JSON Schema to declaratively build and customize web forms.
Inspired by react-jsonschema-form
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.
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);
},
),
);
}
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"
}
}
''';
customFileHandler: () => {
'profile_photo': () async {
return [
File(
'https://cdn.mos.cms.futurecdn.net/LEkEkAKZQjXZkzadbHHsVj-970-80.jpg')
];
},
'*': null
}
customValidatorHandler: () => {
'selectYourCola': (value) {
if (value == 0) {
return 'Cola 0 is not allowed';
}
}
},
- Add all examples
- OnChanged
- References
- pub.dev