Simple Form Builder
A complete form builder for all your needs is still under construction, this project was based on the following repositories:
Simple Json Builder : Tanmoy Karmakar
Json Schema Form: Instituto Iracema
Specs
This library allows you to create a complete form from a json file with
multiple types of fields text , checkbox, multiselect , date , time.
This package also provides additional remark options.
It has been written 100% in Dart. ❤️
Installing
Add the following to your pubspec.yaml file:
dependencies:
simple_json_form: ^0.0.1
Simple Usage
To integrate the Simple form builder all you need to do is follow the given JSON schema and pass it to the formBuilder widget
JSON Schema
// The complete sample is provided in the global folder that can be used as a reference
{
"form": [
{
"key": "questions",
"properties": [
{
"key": "identifier_boat",
"fields": ["1", "2", "3", "4", "5"],
"title": "This is my title",
"description": "This is my description",
"remark": true,
"remark_label": "points",
"remark_title": "insert to points",
"type": "multiple",
"direction": "",
"is_mandatory": false,
"validations": {
"message": "This is my message",
"length": {"min": 10, "max": 20}
}
},
]
},
]
}
Widget Implementation
import 'package:flutter/material.dart';
import 'package:simple_form_builder/formbuilder.dart';
import 'package:simple_form_builder/global/constant.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Json Form Example',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: SingleChildScrollView(
child: Column(
children: [
SimpleJsonForm(
jsonSchema: sampleData,
title: "My Title",
titleStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
description: "My description",
crossAxisAlignment: CrossAxisAlignment.center,
index: 0,
imageUrl: fileUpload(),
submitButtonText: 'Send',
nextButtonText: 'Next',
previousButtonText: 'Previous',
onSubmit: (val) {
if (val == null) {
print("no data");
} else {
var json = jsonEncode(val.toJson());
print(json);
}
},
),
],
),
),
),
);
}
}
Custom Usage
There are several options that allow for more control:
| Properties | Description |
|---|---|
jsonSchema |
JSON Schema to use to generate the form. |
crossAxisAlignment |
crossAxisAlignment to use general form |
padding |
padding to use general form |
title |
Title general to use the form |
titleStyle |
title style to use title the form |
description |
Description general to use the form |
descriptionStyle |
Description style to use description form |
submitButtonText |
To use for text the submit button |
previousButtonText |
To use for text the previous button |
nextButtonText |
To use for text the next button |
index |
If the data contains mutiple forms passing the index of the form will show the question of that perticular form |
onSubmit |
This function will take in the map value and pass it to the given function when submit button is pressed |
loading |
widget to use loading form |
validationTitle |
text for use dialog info |
validationDescription |
text for use dialog info |
