Json editor - A json editor on flutter

Overview

img

Features

  1. Support add comment;
  2. Support show errors for invalid json text;
  3. Pretty format json text;
  4. Output the decoded Map or List object;

Getting started

dependencies:
    json_editor: ^0.0.1

Screen Shot

Usage

import 'package:json_editor/json_editor.dart';

JsonEditor(
    onValue: (value) {
        print(value);
    },
)

You can initial with json text:

import 'package:json_edior/json_editor.dart';

JsonEditor(
    jsonString: '''
        {
            // This is a comment
            "name": "young chan",
            "number": 100,
            "boo": true,
            "user": {"age": 20, "tall": 1.8},
            "cities": ["beijing", "shanghai", "shenzhen"]
         }
    ''',
    onValue: (value) {
        print(value);
    },
)

Or initial with json object:

import 'package:json_editor/json_editor.dart';

JsonEditor(
    jsonValue: const {
        "name": "young",
        "number": 100,
        "boo": true,
        "user": {"age": 20, "tall": 1.8},
        "cities": ["beijing", "shanghai", "shenzhen"]
    },
    onValue: (value) {
        print(value);
    },
)

If have both jsonString and jsonEditor , first to parse jsonString.

The onValue output a Map or a List object. If there is some errors in json text. The closure will not be called.

Theme

If you want to custom the json theme. You can use JsonEditorTheme widget.

JsonEditorTheme(
    themeData: JsonEditorThemeData(
        lightTheme: JsonEditorThemeData.defaultTheme().lightTheme.copyWith(bracketStyle: TextStyle(color: Colors.amber, fontSize: 16)),
        darkTheme: JsonEditorThemeData.defaultTheme().darkTheme
    ),
    child: JsonEditor(
        jsonValue: const {
            "name": "young",
            "number": 100,
            "boo": true,
            "user": {"age": 20, "tall": 1.8},
            "cities": ["beijing", "shanghai", "shenzhen"]
        },
        onValue: (value) {
            print(value);
        },
    )
)

License

See LICENSE

Comments
  • (Feature Request) Add the support for khmer language

    (Feature Request) Add the support for khmer language

    Thank you for the great package. It works perfectly fine when dealing with the English language.

    It would be great if you can take some time from your busy schedule to add support for this feature. Or you can point me to some direction so I can implement it myself and create a pull request.

    When JSON contains the Khmer language it doesn't parse and format the string. I looked into the code and found out that the package only deals with English Unicode only. It would be great if you can add the language support for Khmer as well so it parses and formats the Khmer language just like it does with English.

    See the attached examples.

    Example 1: At the end inside verb it ends with double closing curly bracket } whereas there should be only one. Also when editing the closing curly bracket } after def key value, it can't be deleted. Screen Shot 2022-03-23 at 5 47 39 PM

    Here is the JSON so you can test it. { "uid": "61ea4987851f4038c8fcfb26", "hw": "put a stop to", "syllable": [ { "syl": "put a stop to" } ], "fl": "v.", "verb": [ { "def": "ដាក់ការបញ្ឈប់ទៅ។ " } ], }

    Example 2: In this example, there should be a closing square bracket and a closing curly bracket. But there is not and the editor is not throwing any error. Screen Shot 2022-03-23 at 5 52 01 PM

    Here is the JSON so you can test it. { "uid": "61ea4987851f4038c8fcfb23", "hw": "put a flea in one's ear", "syllable": [ { "syl": "put a flea in one's ear" } ], "fl": "v.", "verb": [ { "def": "ផ្លុំត្រចៀក; និយាយរញ៉ាំរញ៉ូវ; ទន្ទេញទន្ទូររឿយៗ។ " } ], }

    Here is the Unicode specification for Khmer language

    https://unicode.org/charts/PDF/U1780.pdf

    Sharing what I searched and found

    I want to support the Khmer characters listed in the table below CHARACTER TO UNICODE, CONVERSIONS I think you'll be mostly interested in Decimal values, as this is what you're using for english.

    | Character | Decimal Value | U+HEX |UTF-16 code units | | ------------- | --------------| ----------------- | ---------------- | | ក | 6016 | U+1780 | 1780 | | ខ | 6017 | U+1781 | 1781 | | គ | 6018 | U+1782 | 1782 | | ឃ | 6019 | U+1783 | 1783 | | ង | 6020 | U+1784 | 1784 | | ច | 6021 | U+1785 | 1785 | | ឆ | 6022 | U+1786 | 1786 | | ជ | 6023 | U+1787 | 1787 | | ឈ | 6024 | U+1788 | 1788 | | ញ | 6025 | U+1789 | 1789 | | ដ | 6026 | U+178A | 178A | | ឋ | 6027 | U+178B | 178B | | ឌ | 6028 | U+178C | 178C | | ឍ | 6029 | U+178D | 178D | | ណ | 6030 | U+178E | 178E | | ត | 6031 | U+178F | 178F | | ថ | 6032 | U+1790 | 1790 | | ទ | 6033 | U+1791 | 1791 | | ធ | 6034 | U+1792 | 1792 | | ន | 6035 | U+1793 | 1793 | | ប | 6036 | U+1794 | 1794 | | ផ | 6037 | U+1795 | 1795 | | ព | 6038 | U+1796 | 1796 | | ភ | 6039 | U+1797 | 1797 | | ម | 6040 | U+1798 | 1798 | | យ | 6041 | U+1799 | 1799 | | រ | 6042 | U+179A | 179A | | ល | 6043 | U+179B | 179B | | វ | 6044 | U+179C | 179C | | ឝ | 6045 | U+179D | 179D | | ឞ | 6046 | U+179E | 179E | | ស | 6047 | U+179F | 179F | | ហ | 6048 | U+17A0 | 17A0 | | ឡ | 6049 | U+17A1 | 17A1 | | អ | 6050 | U+17A2 | 17A2 | | ឣ | 6051 | U+17A3 | 17A3 | | ឤ | 6052 | U+17A4 | 17A4 | | ឥ | 6053 | U+17A5 | 17A5 | | ឦ | 6054 | U+17A6 | 17A6 | | ឧ | 6055 | U+17A7 | 17A7 | | ឨ | 6056 | U+17A8 | 17A8 | | ឩ | 6057 | U+17A9 | 17A9 | | ឪ | 6058 | U+17AA | 17AA | | ឫ | 6059 | U+17AB | 17AB | | ឬ | 6060 | U+17AC | 17AC | | ឭ | 6061 | U+17AD | 17AD | | ឮ | 6062 | U+17AE | 17AE | | ឯ | 6063 | U+17AF | 17AF | | ឰ | 6064 | U+17B0 | 17B0 | | ឱ | 6065 | U+17B1 | 17B1 | | ឲ | 6066 | U+17B2 | 17B2 | | ឳ | 6067 | U+17B3 | 17B3 | | ឴ | 6068 | U+17B4 | 17B4 | | ឵ | 6069 | U+17B5 | 17B5 | | ា | 6070 | U+17B6 | 17B6 | | ិ | 6071 | U+17B7 | 17B7 | | ី | 6072 | U+17B8 | 17B8 | | ឹ | 6073 | U+17B9 | 17B9 | | ឺ | 6074 | U+17BA | 17BA | | ុ | 6075 | U+17BB | 17BB | | ូ | 6076 | U+17BC | 17BC | | ួ | 6077 | U+17BD | 17BD | | ើ | 6078 | U+17BE | 17BE | | ឿ | 6079 | U+17BF | 17BF | | ៀ | 6080 | U+17C0 | 17C0 | | េ | 6081 | U+17C1 | 17C1 | | ែ | 6082 | U+17C2 | 17C2 | | ៃ | 6083 | U+17C3 | 17C3 | | ោ | 6084 | U+17C4 | 17C4 | | ៅ | 6085 | U+17C5 | 17C5 | | ំ | 6086 | U+17C6 | 17C6 | | ះ | 6087 | U+17C7 | 17C7 | | ៈ | 6088 | U+17C8 | 17C8 | | ៉ | 6089 | U+17C9 | 17C9 | | ៊ | 6090 | U+17CA | 17CA | | ់ | 6091 | U+17CB | 17CB | | ៌ | 6092 | U+17CC | 17CC | | ៍ | 6093 | U+17CD | 17CD | | ៎ | 6094 | U+17CE | 17CE | | ៏ | 6095 | U+17CF | 17CF | | ័ | 6096 | U+17D0 | 17D0 | | ៑ | 6097 | U+17D1 | 17D1 | | ្ | 6098 | U+17D2 | 17D2 | | ៓ | 6099 | U+17D3 | 17D3 | | ។ | 6100 | U+17D4 | 17D4 | | ៕ | 6101 | U+17D5 | 17D5 | | ៖ | 6102 | U+17D6 | 17D6 | | ៗ | 6103 | U+17D7 | 17D7 | | ៘ | 6104 | U+17D8 | 17D8 | | ៙ | 6105 | U+17D9 | 17D9 | | ៚ | 6106 | U+17DA | 17DA | | ៛ | 6107 | U+17DB | 17DB | | ៜ | 6108 | U+17DC | 17DC | | ៝ | 6109 | U+17DD | 17DD | | ០ | 6112 | U+17E0 | 17E0 | | ១ | 6113 | U+17E1 | 17E1 | | ២ | 6114 | U+17E2 | 17E2 | | ៣ | 6115 | U+17E3 | 17E3 | | ៤ | 6116 | U+17E4 | 17E4 | | ៥ | 6117 | U+17E5 | 17E5 | | ៦ | 6118 | U+17E6 | 17E6 | | ៧ | 6119 | U+17E7 | 17E7 | | ៨ | 6120 | U+17E8 | 17E8 | | ៩ | 6121 | U+17E9 | 17E9 | | ៰ | 6128 | U+17F0 | 17F0 | | ៱ | 6129 | U+17F1 | 17F1 | | ៲ | 6130 | U+17F2 | 17F2 | | ៳ | 6131 | U+17F3 | 17F3 | | ៴ | 6132 | U+17F4 | 17F4 | | ៵ | 6133 | U+17F5 | 17F5 | | ៶ | 6134 | U+17F6 | 17F6 | | ៷ | 6135 | U+17F7 | 17F7 | | ៸ | 6136 | U+17F8 | 17F8 | | ៹ | 6137 | U+17F9 | 17F9 |

    enhancement 
    opened by itsatifsiddiqui 2
  • add raw listener. add initial value

    add raw listener. add initial value

    • Add listener for raw value change (good for save value event if it has error).
    • Add parameter for initial value (initialize value and keep the cursor on its place).
    opened by P-B1101 1
  • Logger, onValueChanged and comment issue

    Logger, onValueChanged and comment issue

    Hello, at the first I should say thanks for your awesome repo Anyway I have some issue with that

    1. Why did you use logger package for validating data this is very annoying. Please add an options to disable that

    image

    1. There is some delay to update value in onValueChanged for example I write this json and after that immediately press a button: image but I get this json as JsonElement:
    {
        "test": ""
    }
    
    1. When I try to add jsonString with a comment the comment does not display:
    JsonEditor.string(
      jsonString: '''
      {
          // Insert your data here
      }
      ''',
      enabled: true,
      onValueChanged: (value) {
        document = value;
      },
    ),
    
    bug fixed 
    opened by Jamalianpour 1
  • Embedded arrays parsing error

    Embedded arrays parsing error

    Hello There is a problem when I try to parse such json:

    {
      "array": [
        {
          "first_child": [
            {
              "text": "First item"
            },
            {
              "text": "Second item"
            }
          ],
          "second_child": [
            {
              "text": "First item"
            },
            {
              "text": "Second item"
            }
          ]
        }
      ]
    }
    

    I checked this json in JSON Editor Online and it's worked. But the JsonEditor widget show: "Syntax error: Invalid ',' at line 7 position 94".

    bug fixed 
    opened by SleepyMrPanda 1
  • Editor not updating

    Editor not updating

    I am using this editor in a StatefulWidget to display a JSON string. When updating the state of the widget with the new JSON string the editor is not changing. I checked your code, the editor is only intended to update itself when not enabled.

    opened by Apokalypser 1
  • Delay of 1sec until onValueChanged is triggered

    Delay of 1sec until onValueChanged is triggered

    When editing the text, there is a delay of 1sec since the text was changed to when the onValueChanged callback is triggered.

    There should be a way to disable that.

    opened by Yahllil 0
  • Feature Suggestion

    Feature Suggestion

    First of all I want to say THANKS for the great package :)

    I thing it would be great if we could have line number in this package. I would contribute if I could :)

    enhancement help wanted 
    opened by P-B1101 5
Owner
Chan Young
Chan Young
Fluter-json - App Demonstrating JSON Data Parsing with various flutter widgets

users_list Flutter App to Demonstrate JSON Parsing Getting Started This project is a starting point for a Flutter application. A few resources to get

Khurram Rizvi 5 Jul 10, 2021
State Persistence - Persist state across app launches. By default this library store state as a local JSON file called `data.json` in the applications data directory. Maintainer: @slightfoot

State Persistence Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications dat

Flutter Community 70 Sep 28, 2022
Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON.

JSON to Dart Given a JSON string, this library will generate all the necessary Dart classes to parse and generate JSON. This library is designed to ge

Javier Lecuona 1.2k Dec 25, 2022
A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes.

A JSON serialize class to convert 'to' and 'from' JSON format Enums, DateTime and any of your own classes. Introduction Jsonize solves the problem of

null 2 Nov 17, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Festus Olusegun 116 Dec 27, 2022
A Flutter material theme editor

Flutter Theme ⚠️ WARNING: This app is still under development so please expect bugs and missing features in the app. ⚠️ Inspired by Panache, a Flutter

null 0 Jan 2, 2022
A lightweight HTML-Richtext editor for Flutter

Flutter HTML Editor Flutter HTML Editor is a simple HTML-based Richtext editor, which is able to edit and parse a selected set of HTML tags into a Flu

Herry 14 Oct 19, 2022
A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.

Flutter Html Editor - Enhanced Flutter HTML Editor Enhanced is a text editor for Android, iOS, and Web to help write WYSIWYG HTML code with the Summer

Tanay Neotia 200 Dec 31, 2022
🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Erick Ghaumez 1.7k Dec 30, 2022
A Flutter based code editor

rich_code_editor A simple package that supports creating code editors in Flutter. Flutter version supported: Flutter 1.22.5 Getting Started There are

Sovit 111 Dec 16, 2022
Rich text editor for Flutter

A rich text editor for Flutter FlutterQuill is a rich text editor and a Quill component for Flutter. This library is a WYSIWYG editor built for the mo

X Code 1.7k Jan 4, 2023
An online Dart editor with support for console, web, and Flutter apps

DartPad DartPad is a free, open-source online editor to help developers learn about Dart and Flutter. You can access it at dartpad.dev. What is it? Wh

Dart 1.4k Jan 4, 2023
Panache - 🎨 Flutter Material Theme editor

?? Panache A Flutter Material Theme editor. Panache helps you to create beautiful Material themes for your Flutter applications. Customize widgets col

Erick Ghaumez 1.7k Jan 3, 2023
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Mehdi Zarepour 68 Dec 16, 2022
FLUTTER API: Video Editor allows trim, crop, rotate and scale video with a super flexible UI Design

video_editor My other APIs Scroll Navigation Video Viewer Helpers Features Super flexible UI Design. Support actions: Crop Trim Scale Rotate Cover sel

Luis Felipe Murguia Ramos 214 Dec 26, 2022
Umbra - visual editor for shaders in Flutter

Umbra Generated by the Very Good CLI ?? Umbra, visual editor for shaders in Flutter. Getting Started ?? This project contains 3 flavors: development s

Jochum van der Ploeg 189 Dec 14, 2022
Rich text editor for Flutter based on Delta format (Quill fork)

Visual Editor Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful Delta docu

Visual Space 190 Jan 7, 2023
MathCanvas - Graphical Math Equation Editor made by Flutter

Graphical Math Equation Editor made by Flutter. My goal is to provide a keyboard typing experience like a calculator. Test Web Page: https:

GongBJ 3 Jun 3, 2022
A simple tag editor for inputing tags in Flutter.

Super Tag Editor A simple tag editor for inputting tags with suggestion box Supported suggestion box Screen Shot 1 Screen Shot 2 ) Usage Add the packa

dab 4 Dec 6, 2022