...
| Code Block | ||
|---|---|---|
| ||
import 'package:flutter/material.dart';
import 'package:dynamic_forms/dynamic_forms.dart';
import 'package:flutter_dynamic_forms/flutter_dynamic_forms.dart';
class SimpleFormJson extends StatefulWidget {
@override
_SimpleFormJsonState createState() => _SimpleFormJsonState();
}
class _SimpleFormJsonState extends State<SimpleFormJson> {
bool isLoading = true;
late String checkboxContent;
@override
void initState() {
super.initState();
_buildForm();
}
Future _buildForm() async {
checkboxContent= await rootBundle.loadString('assets/checkbox.json', cache: false);
setState(() {
isLoading = false;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: ParsedFormProvider(
create: (_) => JsonFormManager(), // Or use XmlFormManager() to parse JSON data
content: checkboxContent, // jsonString,
parsers: custom_component.getCustomParserList(), //add your custom parsers
child: FormRenderer<JsonFormManager>( // Use matching FormManager type registered above
renderers: custom_component_renderer.getCustomRenderers(), // add your custom renderers
),
),
),
);
}
} |
...
| Code Block | ||
|---|---|---|
| ||
import 'package:dynamic_forms/dynamic_forms.dart';
import 'package:example/custom_components/checkbox_renderer.dart';
import 'package:flutter_dynamic_forms/flutter_dynamic_forms.dart';
List<FormElementRenderer<FormElement>> getCustomRenderers() {
return [
CheckBoxRenderer()
];
} |
Another Example with Drop Down button
Json File
| Code Block | ||
|---|---|---|
| ||
{
"@name": "form",
"id": "form1",
"children": [
{
"@name": "dropdownButton",
"id": "selectScanner",
"value": "AF",
"hint": "Select Scanner",
"choices": [
{
"@name": "dropdownOption",
"label": "front camera",
"value": "AF"
},
{
"@name": "dropdownOption",
"label": "scanner",
"value": "AR"
}
]
},
{
"@name": "formGroup",
"id": "formgroup3",
"name": "Allowed document type is PDF and Max size 1MB",
"children": [
{
"@name": "dropdownButton",
"id": "proofOfAddress",
"value": "AF",
"hint": "Address Proof",
"uploadButton": "Upload",
"choices": [
{
"@name": "dropdownOption",
"label": "Driver License",
"value": "AF"
},
{
"@name": "dropdownOption",
"label": "Passport",
"value": "AR"
}
]
},
{
"@name": "dropdownButton",
"id": "proofOfIdentity",
"value": "AF",
"hint": "Identity Proof",
"uploadButton": "Upload",
"choices": [
{
"@name": "dropdownOption",
"label": "Driver License",
"value": "AF"
},
{
"@name": "dropdownOption",
"label": "Passport",
"value": "AR"
}
]
},
{
"@name": "dropdownButton",
"id": "consentProof",
"value": "AF",
"hint": "Consent Proof",
"uploadButton": "Upload",
"choices": [
{
"@name": "dropdownOption",
"label": "Consent",
"value": "AF"
}
]
}
]
}
]
}
|
From the above Json we were able to create the following dynamic UI
