json_forms 1.0.1 json_forms: ^1.0.1 copied to clipboard
A Flutter package that generate the widgets corresponding to a form using a json file
json_forms #
A package to make forms faster. Just write a JSON file and the Widgets will be generated
Getting Started #
Usage #
Widget widget = JsonForm.fromJson(yourJson);
Additional Information #
Available parameters for JsonForm.fromJson()
key
: GlobalKey use to control form validation manually//Example import 'package:json_forms/json_forms.dart'; final GlobalKey<JsonFormState> formKey = GlobalKey<JsonFormState>(); Widget widget = JsonForm.fromJson( myForm, key : formKey ); //Inside a button onPressed: (){ if(formKey.validate()){ // Do stuff } }
progressColor
: Color used for the progress bar (not relevant ifhideBar=true
)primaryColor
: Color used for the accents & background of the bottom bardecoration
: BoxDecoration around each questioninnerPadding
: Padding betweendecoration
and question content (fields, text, etc...)outerPadding
: Padding around the question elementuseSwitch
: Boolean to use switch instead of checkbox for boolean questionshiderBar
: If set totrue
, hide the bottom bar. Relevant when you have only one section in your form or if you want to validate using your own button or widgetshowFormTitle
: Boolean controlling if the form's title should be displayed or notshowSectionsTitles
: Boolean controlling if the section's titles should be displayed or notonValidation
: Callback function when the form is validated with the bottom bartranslator
: Function to interpret text and placeholder value. For example, use a key string in your json file and thentranslator : Applocalization.of(context).translate('key')
to show different text depending of the languagereadOnly
: Boolean, iftrue
, the form's values cannot be changed (quite self explanatory)
Json Formatting #
Example of JSON file
{ // Form Object
"name": "The form's name",
"sections": [ // List of Section objects
{
"name": "Name of the first section",
"questions": [ // List of Question Object
...
]
}
]
}
Available question's types :
- Text
- Number
- Bool
- Radio
- Pick
- CheckTable
- OptionalQuantityTable (yes, I could have found a better name :) )
Examples :
- Text
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Text",
"value": null, // Null or String
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"isRequired": false // Boolean, set it to false if the condition is not null and/or if possibilities not null
},
- Number
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Number",
"value": null, // Null or Int
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"isRequired": false // Boolean, set it to false if the condition is not null and/or if possibilities not null
},
- Bool
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Bool",
"value": false, // True or false
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"isRequired": false // Boolean, set it to false if the condition is not null
},
- Radio
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Radio",
"value": 4, // Null or Type corresponding to the possibilities
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"possibilities": [1,2,3,4,5],
"isRequired": false // Boolean, set it to false if the condition is not null and/or if possibilities not null
},
- Pick
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Bool",
"value": null, // Null or Type corresponding to the possibilities
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"possibilities": ["red", "green", "blue"],
"isRequired": false // Boolean, set it to false if the condition is not null
},
- CheckTable
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Bool",
"value": null, // Null or array of objects with type corresponding to the possibilities
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"possibilities": ["cat", "dog", "fish"],
"isRequired": false // Boolean, set it to false if the condition is not null
},
- OptionalQuantityTable
// Question object
{
"id": 0,
"text": "your question as a string",
"type": "Bool",
"value": null, // Null or dictionary with possibility as key and number as value
"condition": { // Condition to be satisfy to render this question
"questionId": 1,
"value": "required answer"
},
"possibilities": ["potatoes", "carrots"],
"isRequired": false // Boolean, set it to false if the condition is not null
},