flutter_json_schema_form

Description:

flutter json schema form

Create beautiful and low-effort forms that output valid data.
Based on Flutter / Material Design Widgets / JSON Schema.
Features #


    



Render form UI from the provided JSON Schema
Integrates with Flutter Material Themes
Get programatically the form content as a JSON matching the provided JSON Schema
Fill the form programatically
ReadOnly fields
Standard Fields

Object: forms inside forms

Enum: easy select option UI
String: get rid of boilerplate
Number: get rid of boilerplate²




Special Fields

File fields: custom synthax for handling files



Getting started #

Go to jsonschema.net (or your favorite JSON Schema generation tool)
Provide an example of JSON you want to match the JSON Schema
Tools like jsonschema.net can provide a base JSON Schema you can easily customize and use with flutter_json_schema_form
Start coding!

Guidance right below.



Usage #
Make the JSON Schema available on your app.
The simplest way to do this is to declare a variable of type Map<String, dynamic> and assign the key-value structure of the JSON Schema to it.
final jsonSchema = JsonSchema.fromMap({
    "\$schema": "https://json-schema.org/draft/2019-09/schema",
    "\$id": "http://example.com/example.json",
    "type": "object",
    "default": {},
    "title": "Clinic",
    "description":
        "A Clinic is where patients can have aesthetic sessions with their doctors.",
    "required": [
      "name",
      "cnpj",
    ],
    "properties": {
      "name": {
        "type": "string",
        "default": "",
        "title": "Name",
        "examples": ["Rosa Clínica"]
      },
      "cnpj": {
        "type": "string",
        "default": "",
        "title": "CNPJ",
        "description": "It is unique for each clinic.",
        "examples": ["05.768.725/0001-48"]
      }
    },
    "examples": [
      {
        "name": "Rosa Clínica",
        "cnpj": "05.768.725/0001-48"
      }
    ]
  });
copied to clipboard
Then, in your app, you can use the JSON Schema to render a form, like this:
class ClinicPageForm extends StatelessWidget {
const ClinicPageForm({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return FlutterJsonSchemaForm(
jsonSchema: jsonSchema,
buttonText: 'Send',
);
}
}

copied to clipboard
If you need a controller to handle the form, you can use the FlutterJsonSchemaFormController class:
class ClinicPageForm extends StatelessWidget {
const ClinicPageForm({Key? key}) : super(key: key);

final controller = FlutterJsonSchemaFormController(
jsonSchema: jsonSchema,
);

@override
Widget build(BuildContext context) {
return FlutterJsonSchemaForm(
jsonSchema: jsonSchema,
controller: controller,
buttonText: 'Send',
);
}
}

copied to clipboard
Additional information #

Check out the JSON Schema team's website: JSON-Schema.org
Learn more about JSON Schema: Understanding JSON Schema
Your contribution to this package would be awesome! We will be happy to analyse your PR. You can use the GitHub repository issues for feature requesting, too.
If you find any problem, make a GH issue and tell us about it!
This package is proudly used and maintained by Iracema Institute of Research and Innovation Community. We will be happy to help you, reach out!