json_editor

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，提供可自訂的 JSON 編輯器，用於在 Flutter 應用程式中顯示和編輯 JSON 數據。它支援語法強調、可摺疊節點和即時驗證，非常適合需要在應用程式內部直接處理 JSON 結構的開發人員。此編輯器設計直覺且跨多個平台響應式運作，包括行動裝置與桌面。透過簡單的 pub add 命令，即可順暢整合至現有的 Flutter 專案。

適用情境

編輯 JSON 配置文件
除錯 API 回應
互動式資料輸入表單
即時 JSON 驗證
基於JSON的原型工作流

主要特色

語法強調
可摺疊的 JSON 節點
即時驗證
跨平台支援
可自定義的 UI 主題

適合對象

開發 JSON 豐富型應用的開發者
UI 設計師原型化資料結構
需要互動式 JSON 編輯的工具
教授 JSON 的教育類應用程式
桌面與行動應用程式開發者

使用建議

處理大型 JSON 檔案時可能需要效能優化
有限的高級JSON模式功能
無內建的匯出/匯入功能
依賴外部 GitHub 倉庫
未針對極深嵌套或深度JSON結構進行優化

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Features

Support add comment;
Support show errors for invalid json text;
Pretty format json text;
Output a custom json data model: JsonElement ;

Getting started

dependencies:
    json_editor: ^0.0.8

Screen Shot

Usage

import 'package:json_editor/json_editor.dart';

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

import 'package:json_editor/json_editor.dart';

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

JsonElement is a data model witch contains key, value and comment.

import 'package:json_editor/json_editor.dart';

JsonEditor.element(
    element: JsonElement(),
    onValueChanged: (value) {
        print(value);
    },
)

Theme

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

JsonEditorTheme(
    themeData: JsonEditorThemeData.defaultTheme(),
    child: JsonEditor.object(
        object: const {
            "name": "young",
            "number": 100,
            "boo": true,
            "user": {"age": 20, "tall": 1.8},
            "cities": ["beijing", "shanghai", "shenzhen"]
        },
        onValueChanged: (value) {
            print(value);
        },
    )
)

License

See LICENSE

搜尋套件、儲存庫與 APP 分類

安裝套件