json_dynamic_form 1.0.0

A basic JSON-based form generator library. This is still a WIP and new features will be released

json_dynamic_form

A basic JSON-based form generator library.

Installation

Add dependency to pubspec.yaml

dependencies:
  ...
  json_dynamic_form: 1.0.0

Run in your terminal

flutter packages get

Example

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //Example supported JSON, the params must have the same name as described here
  List<dynamic> data = [
      {
        "type": "text",
        "label": "Text",
        "description": "Enter your name",
        "placeholder": "Enter your name",
        "regex": "",
        "errorText": "",
        "required": true,
        "name": "text-1622684775448"
      },
      {
        "type": "email",
        "label": "Email",
        "description": "Enter your email",
        "placeholder": "Enter your email",
        "regex": "",
        "errorText": "Please enter a valid email",
        "required": true,
        "name": "email-1622684776606"
      },
      {
        "type": "phone",
        "label": "Phone",
        "description": "Enter your phone",
        "placeholder": "Enter your phone",
        "regex": "",
        "errorText": "Please enter a valid phone number",
        "required": false,
        "name": "phone-1622684777910"
      },
      {
        "type": "checkbox",
        "label": "Checkbox",
        "description": "Checkbox",
        "values": [
          {"label": "Option 1", "value": "option-1"},
          {"label": "Option 2", "value": "option-2"}
        ],
        "name": "checkbox-1622684784550"
      },
      {
        "type": "radio",
        "label": "Radio",
        "description": "Radio boxes",
        "values": [
          {"label": "Option 1", "value": "option-1"},
          {"label": "Option 2", "value": "option-2"}
        ],
        "name": "radio-1622684785878"
      },
      {
        "type": "number",
        "label": "Number",
        "description": "Age",
        "placeholder": "Enter your age",
        "min": 12,
        "max": 90,
        "name": "number-1622684779623"
      },
      {
        "type": "autocomplete",
        "label": "Select",
        "description": "Select",
        "placeholder": "Select",
        "values": [
          {"label": "Option 1", "value": "option-1"},
          {"label": "Option 2", "value": "option-2"},
          {"label": "Option 3", "value": "option-3"}
        ],
        "name": "autocomplete-1622684787710"
      },
      {
        "type": "autocomplete",
        "label": "Select",
        "description": "Select",
        "placeholder": "Select",
        "values": [
          {"label": "Option 4", "value": "option-4"},
          {"label": "Option 5", "value": "option-5"},
          {"label": "Option 6", "value": "option-6"}
        ],
        "name": "autocomplete-prueba"
      }
    ];

  //library variables  
  JsonDynamicForm jsonDynamicForm;
  List<Widget> fields = List<Widget>.empty(growable: true);

  @override
  void initState() {
    super.initState();
    
    jsonDynamicForm = JsonDynamicForm(
        data: data,
        setState: setState);

    fields = jsonDynamicForm.generateFields();
  }

  @override
  Widget build(BuildContext context) {

    //IMPORTANT!! This MUST be placed here with the [firstTime: false] param, otherwise the UI will never update
    
    fields = jsonDynamicForm.generateFields(firstTime: false);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
          child: Column(
              children: [
                Column(crossAxisAlignment: CrossAxisAlignment.start,children: fields),
                TextButton(
                    onPressed: getData,
                    child: Text("Get the data!"))
              ]),
        ),
      );
  }

  getData() {
    print(json.encode(jsonDynamicForm.printData()));
  }
}