Flutter JSON Schema Form

This is proof of concept version of building Flutter forms out of JSON Schema.

What is JSON Schema?
JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. — https://json-schema.org/

JSON Schema can be used to generate Web /Mobile UI’s generations. and widely used for forms definitions. There are lots of existing implementations ranging from angular, jquery to react frameworks. — https://json-schema.org/implementations.html#web-ui-generation

When I was creating this POC I could not find an open-source implementation of Flutter. POC for this implementation will be cover, Parsing the JSON Schema, Two input types(TextField and CheckBox), Required form validations and data bindings.

caztial/flutter-json-schema-form

Below is the sample JSON schema I have used.

https://github.com/caztial/flutter-json-schema-form/blob/master/assets/testSchema.json

In simple terms above JSON has
* the title and description of the form.
* firstname, lastname and email are three text inputs where tos is a checkbox. * firstname, email and tos are required fields.

Within the JsonSchemaBloc , the application is reading the above json-schema and mapped (podo’s) them into Schema and Property models.

https://github.com/caztial/flutter-json-schema-form/tree/master/lib/models (Full Code)

https://github.com/caztial/flutter-json-schema-form/blob/master/lib/bloc/JsonSchemaBloc.dart

After mapping into models these will be feed into _jsonSchema stream. After that initDataBinding is creating a dynamic BehaviorSubjcet observer for each property.

With the schema and JsonFormBloc created all you need is to pass them to the JsonSchemaForm Widget.

Custom JsonSchemaForm Widget is leveraging inbuild Flutter Form Widget to handle Validations and Layouts. Since this has Streams for each property only the necessary widget will get re-rendered. CheckBoxFormField is a custom widget that extends FormField class. All the other input types developed must extend the FormField class.

Rendered JSON Schema Form

Validation of the form

Submission

After Submission form data is added to the submitData Stream in the bloc. If you have a listener to this Stream you can easily pass the JSON data to an API. For demo purposes, I have print the form data out on the screen.

If you have any question please send them through medium and git.
Thank you.