JsonEditor class #

Edit your JSON object with this package. Create, edit and delete objects using this user friendly widget.

See the sample below for an example.

Screenshot #

Getting started #

• Add the package in your flutter project. Run this command in terminal flutter pub add json_editor_flutter.
• Import the package import 'package:json_editor_flutter/json_editor_flutter.dart';.

Using JsonEditor #

JSON can be edited in two ways, UI editor or text editor. You can disable either of them.

When UI editor is active, you can disable adding/deleting keys by using [enableMoreOptions] and can disable key editing by using [enableKeyEdit].

When text editor is active, it will simply ignore [enableKeyEdit] and [enableMoreOptions].

[duration] is the debounce time for [onChanged] function. Defaults to 500 milliseconds.

[editors] is the supported list of editors. First element will be used as default editor. Defaults to [Editors.tree, Editors.text].

Example #

JsonEditor(
  onChanged: (value) {
    // Do something
  },
  json: jsonEncode({
    "name": "John Doe",
    "age": 24,
    "hobbies": ["Reading", "Coding"],
    "address": {
      "street": "Main Street",
      "number": 1234567890,
      "city": "New York"
    }
  }),
)

Enums #

Supported editors for JSON Editor.

enum  Editors { tree, text }

Properties #

json -> String
JSON object to be edited. Pass it as jsonEncode(data). Must be a Map.

onChanged -> ValueChanged<Map>
Debounce duration for [onChanged] function.

duration -> Duration
Debounce duration for onChanged function. Defaults to 500 milliseconds.

enableMoreOptions -> bool
Enables more options like adding or deleting data. Defaults to false.

enableKeyEdit -> bool
Enables editing of keys. Defaults to true.

enableValueEdit -> bool
Enables editing of values. Defaults to true.

themeColor -> Color?
Theme color for the editor. Changes the border color and header color.

editors -> List<Editors>
List of supported editors. First element will be used as default editor.

actions -> List<Widget>
A list of Widgets to display in a row at the end of header.

enableHorizontalScroll -> bool
Enables horizontal scroll for the tree view. Defaults to false.

searchDuration -> Duration
Debounce duration for search function.

beforeScrollDuration -> Duration
The Duration between the search and the starting of scroll animation.

All the objects are expanded in order to find the correct offset position of the searched key. beforeScrollDuration refers to the time given for rebuilding the UI to expand all objects. Once the rebuilding is completed in the given duration, the scroll animation will work properly. If the duration provided is short you will not see the scroll animation.

Play around with this property to find your suitable duration. beforeScrollDuration is proportional to size of the JSON object.

Additional information #

You can raise an issue/feature request on github Json Editor Issues

Please leave a like if you find this package useful. 👍