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/FormWidget.dart' as prefix0;
    
    final GlobalKey<prefix0.FormState> formKey = GlobalKey<prefix0.FormState>();
    
    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 if hideBar=true)
  • primaryColor : Color used for the accents & background of the bottom bar
  • decoration : BoxDecoration around each question
  • innerPadding : Padding between decoration and question content (fields, text, etc...)
  • outerPadding : Padding around the question element
  • useSwitch : Boolean to use switch instead of checkbox for boolean questions
  • hiderBar : If set to true, 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 widget
  • showFormTitle : Boolean controlling if the form's title should be displayed or not
  • showSectionsTitles : Boolean controlling if the section's titles should be displayed or not
  • onValidation : Callback function when the form is validated with the bottom bar
  • translator : Function to interpret text and placeholder value. For example, use a key string in your json file and then translator : Applocalization.of(context).translate('key') to show different text depending of the language
  • readOnly : Boolean, if true, 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
},

Libraries

json_forms