This library aims to help developer get started quickly and create a form made out of json.

Features

The JsonForm can be updated both from the user interaction but can also be notified from outside (check the example for the stream). You can also get the Json back.

Usage

You can declare a Json as:

  final Map<String, dynamic> json = {
    "widgets": [
      {
        "id": "1",
        "name": "Toggle",
        "type": "toggle",
        "values": ["On", "Off"],
        "default_value": "0",
        "chosen_value": 1
      },
      {
        "id": "2",
        "name": "Static text",
        "type": "static_text",
        "chosen_value": "value",
        "description": "(description..)",
      },
      {
        "id": "3",
        "name": "Edit text",
        "type": "edit_text",
        "chosen_value": "edit value",
        "description": "(edit description..)",
      },
      {"type": "header", "name": "Header", "id": "99"},
      {
        "id": "4",
        "name": "Drop down",
        "type": "drop_down",
        "values": ["Low-Intermediate", "Medium", "High"],
        "chosen_value": "Low-Intermediate"
      }
    ]
  };

And easily use the basic Theme (or edit it)

 @override
 Widget build(BuildContext context) {
  return Sizer(
    builder: (BuildContext context, Orientation orientation, DeviceType deviceType) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Floating Action Button'),
        ),
        body: RefreshIndicator(
          onRefresh: _refresh,
          child: JsonFormWithThemeBuilder(
              jsonWidgets: json)
              .setDateBuilderMethod(dateBuilder)
              .registerComponent(DropDownParser2Creator())
              .setStreamUpdates(onValueChangeStream)
              .setOnValueChanged((String d, dynamic s) async {
            print("Update id $d to value $s");
            await Future.delayed(const Duration(seconds: 1));
            return Future.value(true);
          })
              .setTheme(const DefaultTheme()).build(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counter++;
            if (counter % 4 == 1) {
              toggle++;
              _onUserController.add({}..["1"] = toggleList[toggle % 2]); // toggle
            }
            if (counter % 4 == 2) {
              _onUserController.add({}..["2"] = "updated" + Random().nextInt(10).toString()); // toggle
            }
            if (counter % 4 == 3) {
              _onUserController.add({}..["3"] = "Val" + Random().nextInt(100000).toString()); // toggle
            }
            if (counter % 4 == 0) {
              _onUserController.add({}..["4"] = list[toggle % 2]); // toggle
            }
          },
          child: const Icon(Icons.navigation),
          backgroundColor: Colors.green,
        ),
      );
    },
  );
}

Additional information

contribute to the package, how to file issues, what response they can expect from the package authors, and more.

Created For Aidoc Medical and being used by customers around the world.

Libraries

edit_text_parser
edit_text_value
form
header_parser
inherited_json_form_theme
item_model
json_form_theme
json_to_form_lib
json_to_form_with_theme
line_wrapper
name_description_widget
parser_creator
parsers
parsing_exception
saveable_edit_text_value
static_text_parser
static_text_value
toggle
toggle_parser
widgets