json_dynamic_form

Description:

json dynamic form

json_dynamic_form #



A basic JSON-based form generator library.
Installation #
Add dependency to pubspec.yaml
dependencies:
...
json_dynamic_form: 1.0.0
copied to clipboard
Run in your terminal
flutter packages get
copied to clipboard
Example
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
//Example supported JSON, the params must have the same name as described here
List<dynamic> data = [
{
"type": "text",
"label": "Text",
"description": "Enter your name",
"placeholder": "Enter your name",
"regex": "",
"errorText": "",
"required": true,
"name": "text-1622684775448"
},
{
"type": "email",
"label": "Email",
"description": "Enter your email",
"placeholder": "Enter your email",
"regex": "",
"errorText": "Please enter a valid email",
"required": true,
"name": "email-1622684776606"
},
{
"type": "phone",
"label": "Phone",
"description": "Enter your phone",
"placeholder": "Enter your phone",
"regex": "",
"errorText": "Please enter a valid phone number",
"required": false,
"name": "phone-1622684777910"
},
{
"type": "checkbox",
"label": "Checkbox",
"description": "Checkbox",
"values": [
{"label": "Option 1", "value": "option-1"},
{"label": "Option 2", "value": "option-2"}
],
"name": "checkbox-1622684784550"
},
{
"type": "radio",
"label": "Radio",
"description": "Radio boxes",
"values": [
{"label": "Option 1", "value": "option-1"},
{"label": "Option 2", "value": "option-2"}
],
"name": "radio-1622684785878"
},
{
"type": "number",
"label": "Number",
"description": "Age",
"placeholder": "Enter your age",
"min": 12,
"max": 90,
"name": "number-1622684779623"
},
{
"type": "autocomplete",
"label": "Select",
"description": "Select",
"placeholder": "Select",
"values": [
{"label": "Option 1", "value": "option-1"},
{"label": "Option 2", "value": "option-2"},
{"label": "Option 3", "value": "option-3"}
],
"name": "autocomplete-1622684787710"
},
{
"type": "autocomplete",
"label": "Select",
"description": "Select",
"placeholder": "Select",
"values": [
{"label": "Option 4", "value": "option-4"},
{"label": "Option 5", "value": "option-5"},
{"label": "Option 6", "value": "option-6"}
],
"name": "autocomplete-prueba"
}
];

//library variables
JsonDynamicForm jsonDynamicForm;
List<Widget> fields = List<Widget>.empty(growable: true);

@override
void initState() {
super.initState();

jsonDynamicForm = JsonDynamicForm(
data: data,
setState: setState);

fields = jsonDynamicForm.generateFields();
}

@override
Widget build(BuildContext context) {

//IMPORTANT!! This MUST be placed here with the [firstTime: false] param, otherwise the UI will never update

fields = jsonDynamicForm.generateFields(firstTime: false);

return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start,children: fields),
TextButton(
onPressed: getData,
child: Text("Get the data!"))
]),
),
);
}

getData() {
print(json.encode(jsonDynamicForm.printData()));
}
}

copied to clipboard