simple_json_form 0.0.1

A simple form builder that lets you create a complete form from a simple JSON data.

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