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

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",
                },
              ]
            },
          ]
        ]
      }
    ]
  }

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);
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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