simple_json_form

Description:

simple json form

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, format1.
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.3
copied to clipboard


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

//multiple (option button)
{
"form": [
{
"key": "informations",
"properties": [
"key": "identifier",
"fields": ["1", "2", "3", "4", "5"],
"title": "This is my title",
"description": "This is my description",
"type": "multiple",
]
}
]
}

//checkbox
{
"form": [
{
"key": "informations",
"properties": [
"key": "identifier",
"fields": ["1", "2", "3", "4", "5"],
"title": "This is my title",
"description": "This is my description",
"type": "checkbox"
]
}
]
}

//text - number
{
"form": [
{
"key": "informations",
"properties": [
"key": "identifier",
"title": "This is my title",
"description": "This is my description",
"type": "text",
"is_mandatory": false,
"readOnly": true,
"validations": {
"message": "This is my message",
"length": {"min": 10, "max": 20},
}
]
}
]
}

//date
{
"form": [
{
"key": "informations",
"properties": [
"key": "identifier",
"title": "This is my title",
"description": "This is my description",
"type": "date",
"is_mandatory": false,
]
}
]
}

//time
{
"form": [
{
"key": "informations",
"properties": [
"key": "identifier_boat",
"title": "This is my title",
"description": "This is my description",
"type": "time",
"is_mandatory": false,
]
}
]
}

//format1
{
"form": [
{
"key": "informations",
"properties": [
"key": "identifier_boat",
"fields": ["1", "2", "3", "4", "5"],
"title": "This is my title",
"description": "This is my description",
"type": "format1",
"raw": [
{
"title": "Menu 1",
"description": "description 1",
"properties": [
{
"key": "key_date",
"title": "date",
"type": "date",
},
]
},
{
"title": "Menu 2",
"properties": [
{
"key": "key_trips",
"title": "Trips",
"type": "text",
},
]
},
]
]
}
]
}

copied to clipboard

Widget Implementation #
import 'dart:convert';

import 'package:example/constants/constants.dart';
import 'package:flutter/material.dart';
import 'package:simple_json_form/simple_json_form.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//theme: ThemeData.dark(),
title: 'FormBuilder Example',
home: Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
),
body: SingleChildScrollView(
child: Column(
children: [
SimpleJsonForm(
jsonSchema: sampleData,
title: "EVALUACION DE DESEMPEÑO DEL PERSONAL EMBARCADO",
titleStyle: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
description: "EVALUACION DE DESEMPEÑO",
crossAxisAlignment: CrossAxisAlignment.center,
index: 0,
imageUrl: '',
defaultValues: DefaultValues().copyWith(
nextButtonText: 'Siguiente',
hintDropdownText: 'Elija una opcion',
previousButtonText: 'Anterior',
submitButtonText: 'Enviar',
validationDescription: 'Algunos campos requeridos faltan',
validationTitle: 'Fallo validaciones',
fieldRequired: 'campo es requerido',
),
descriptionStyleText: const TextStyle(
color: Colors.lightBlue,
),
titleStyleText: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.blue,
),
onSubmit: (val) {
if (val == null) {
print("no data");
} else {
var json = jsonEncode(val.toJson());
print(json);
}
},
),
],
),
),
),
);
}
}
copied to clipboard

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


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


defaultValues
model to use with values default in form