json_form_generator 0.0.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 75

json_form_generator #

Easily Convert Json to Form for Flutter apps. #

Installation #

  • Add this to your package's pubspec.yaml file:
dependencies:
  json_form_generator: "^0.0.1"
  • You can install packages from the command line: with Flutter:
$ flutter packages get
  • Import it Now in your Dart code, you can use:
 import 'package:json_form_generator/json_form_generator.dart';

JsonFormGenerator #

new JsonFormGenerator(
    form: form,
    onChanged: (dynamic response) {
        this.response = response;
    },
),

Attribute #

  • form (Type String) Your form in String @require
  • onChanged (Type Function)(1 parameter) call the function every time a change in the form is made @required
  • initValue (Type Map) You can now populate the form with initial value in case you are trying to update a form [optional]

Form #

Create Form String

String fro = json.encode([
    {
      "title": "name",
      "label": "what is your name",
      "type": "text",
      "required": "yes"
    },
    {
      "title": "agegroup",
      "label": "tell us your age group",
      "type": "select",
      "items": ["1-20", "21-30", "31-40", "41-50", "51-60"],
      "required": "no"
    }
  ]);

Fields #

  • All fields has attribute
  • Important to set the "required" field to "yes" or "no" for validation
Types
  • text
  • password
  • multiline
  • integer
  • date
  • select
  • radio
  • switch
text, password, multiline, integer

Using the "type":"password"
obscureText is set to true

Using the "type":"integer"
keyboardType is set to TextInputType.number

Using the "type":"multiline"
maxLines is set to 10.0


// Example for json string
// to start with a default value you can add the value attribute
  String formString = json.encode([
        {
             'type': 'text',
             'title': 'Name',
             'label': "username",
             'required': 'yes'
        },
        {
             'type': 'password',
             'title': 'password',
             'label': "Password",
             'required': 'yes'
        },
        {
             'type': 'multiline',
             'title': 'biography',
             'label': "Biography",
             'required': 'no'
        },
        {

             'type': 'integer',
             'title': 'phone',
             'label': 'Phone number',
             'required': 'no'
        },
    ]
 );

date #

 String formString = json.encode([
         {

            "title": "dateOfReg",
            "label": "what is the date of registration",
            "type": "date",
            "required": "no"

        },
    ]);

select #

 String formString = json.encode([
        {

        "title": "agegroup",
        "label": "tell us your age group",
        "type": "select",
        "items": ["1-20", "21-30", "31-40", "41-50", "51-60"],
        "required": "no"

    }
    ]);

radio #

 String formString = json.encode([
        {
          'title': 'needs',
          'type': 'radio',
          'label': 'Which would you like',
          'items': ["Java", "Dart", "All"],
        }
    ]);

switch #

 String formString = json.encode([
        {
      'title': 'canCode',
      'type': 'switch',
      'label': 'Are you old enough to code',
    },
    ]);

Usage #

  • Example
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:json_form_generator/json_form_generator.dart';

class CreatedForm extends StatefulWidget {
  @override
  _CreatedFormState createState() => _CreatedFormState();
}

class _CreatedFormState extends State<CreatedForm> {

   // dynamic response to store your form data that can be sent as  post request
   dynamic response;

   // set the formkey for validation
   var _formkey = GlobalKey<FormState>();

  String formItems = json.encode([
    {
      "title": "name",
      "label": "what is your name",
      "type": "text",
      "required": "yes"
    },
    {
      "title": "dateOfReg",
      "label": "what is the date of registration",
      "type": "date",
      "required": "no"
    },
    {
      "title": "agegroup",
      "label": "tell us your age group",
      "type": "select",
      "items": ["1-20", "21-30", "31-40", "41-50", "51-60"],
      "required": "no"
    }
  ]);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("JSONFORM"),
      ),
      body: SingleChildScrollView(
        child: Form(
          key: _formkey, // add the formkey here
          child: Column(children: <Widget>[
            JsonFormGenerator(
              form: formItems,
              onChanged: (dynamic value) {
                setState(() {
                  this.response = value;
                });
              },
            ),
            new RaisedButton(
                child: new Text('Send'),
                onPressed: () {
                  if (_formkey.currentState.validate()) {
                    print(this.response.toString());
                  }
                })
          ]),
        ),
      ),
    );
  }
}

When there is a change in the form, the (dynamic response;) is updated,

               onChanged: (dynamic response) {
                 this.response = response;
               },

when text is added to the TextField, add field called response

// initial form
[{"title":"name","label":"what is your name","type":"text","required":"yes"},{"title":"dateOfReg","label":"what is the date of registration","type":"date","required":"no"},{"title":"agegroup","label":"tell us your age group","type":"select","items":["1-20","21-30","31-40","41-50","51-60"],"required":"no"}]

// initial response
 null

// when the form is updated ,  dynamic response; is also updated
{name: emeka, dateOfReg: 2020-03-26, agegroup: 31-40}

New update #

  • You can now populate the form with initial value in case you are trying to update a form -To use, pass a Map with the key as the title of your form schema

  • Example

String form = json.encode([
           {
              "title": "name",
              "label": "what is your name",
              "type": "text",
              "required": "yes"
            },
             {
              "title": "age",
              "label": "what is your name",
              "type": "integer",
              "required": "yes"
            },
          ]);

Map initValue = { "name": "emeka", "age" :"20"}


  JsonFormGenerator(
              form: formItems,
              initValue:initValue
              onChanged: (dynamic value) {
               // handle your resoponse data
              },
            ),

NOTE #

the key of each key value pair of the initValue has to be there same with the value of the title key

Getting Started #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

TODO #

  • Add checkbox

Changelog #

0.0.6 #

  • you can now populate the form with initial data, in case you trying to update a form

Changelog #

0.0.5 #

  • Added example.dart

0.0.4 #

  • Added switch
  • Added radio

0.0.3 #

  • LICENSE changes

0.0.2 #

  • no major changes

0.0.1 #

  • Built the package

example/example.dart

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:json_form_generator/json_form_generator.dart';

class Reg extends StatefulWidget {
  @override
  _RegState createState() => _RegState();
}

class _RegState extends State<Reg> {
  dynamic response;
  var _formkey = GlobalKey<FormState>();

  String form = json.encode([
    {
      'title': 'switchtext',
      'type': 'switch',
      'label': 'Radio Button tests',
    },
    {
      'title': 'switch',
      'type': 'switch',
      'label': 'Radio Button tests 2',
    },
    {
      'title': 'radiotest',
      'type': 'radio',
      'label': 'Radio Button tests',
      'items': ["product 1", "product 2", "product 3"],
    },
    {
      'title': 'ratio',
      'type': 'radio',
      'label': 'Radio Button tests',
      'items': ["House", "Food", "Ass"],
    },
    {
      "title": "name",
      "label": "what is your name",
      "type": "text",
      "required": "yes"
    },
    {
      "title": "dateOfReg",
      "label": "what is the date of registration",
      "type": "date",
      "required": "no"
    },
    {
      "title": "agegroup",
      "label": "tell us your age group",
      "type": "select",
      "items": ["1-20", "21-30", "31-40", "41-50", "51-60"],
      "required": "no"
    }
  ]);
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("JSON FORM GEN"),
      ),
      body: SingleChildScrollView(
        child: Form(
          key: _formkey,
          child: Column(children: <Widget>[
            JsonFormGenerator(
              form: form,
              onChanged: (dynamic value) {
                print(value);
                setState(() {
                  this.response = value;
                });
              },
            ),
            new RaisedButton(
                child: new Text('Send'),
                onPressed: () {
                  if (_formkey.currentState.validate()) {
                    print(this.response.toString());
                  }
                })
          ]),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  json_form_generator: ^0.0.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:json_form_generator/json_form_generator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
89
Overall:
Weighted score of the above. [more]
75
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • json_form_generator that is a package requiring null.

Health suggestions

Fix lib/json_form_generator.dart. (-0.50 points)

Analysis of lib/json_form_generator.dart reported 1 hint:

line 124 col 48: 'subhead' is deprecated and shouldn't be used. This is the term used in the 2014 version of material design. The modern term is subtitle1. This feature was deprecated after v1.13.8..

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

The package description is too short. (-1 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test