JsonEditor class

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

See the sample below for an example.

JsonEditor Live Demo

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, Tree editor or text editor. You can disable either of them.

When UI editor is active, you can disable adding/deleting keys by using enableMoreOptions. Editing keys and values can also be disabled by using enableKeyEdit and enableValueEdit.

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

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 }

Customization

expandedObjects

[expandedObjects] refers to the objects that will be expanded by default. Index can be provided when the data is a List.

data = {
  "hobbies": ["Reading books", "Playing Cricket"],
  "education": [
    {"name": "Bachelor of Engineering", "marks": 75},
    {"name": "Master of Engineering", "marks": 72},
  ],
}

For the given data

1. To expand education pass => ["education"]
2. To expand hobbies and education pass => ["hobbies", "education"]
3. To expand the first element (index 0) of education list, this means we need to expand education too. In this case you need not to pass "education" separately. Just pass a list of all nested objects => [["education", 0]]

JsonEditor(
  expandedObjects: const [
    "hobbies",
    ["education", 0] // expands nested object in `education`
  ],
  onChanged: (_) {},
  json: jsonEncode(data),
)

Properties

Additional information

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

Please leave a like if you find this package useful. :+1: