{"id":18352387,"url":"https://github.com/cleveroad/cr_json_widget","last_synced_at":"2025-04-10T00:38:21.908Z","repository":{"id":45235476,"uuid":"439350199","full_name":"Cleveroad/cr_json_widget","owner":"Cleveroad","description":null,"archived":false,"fork":false,"pushed_at":"2023-04-05T07:45:44.000Z","size":1171,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-10T00:38:16.703Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cleveroad.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-17T13:55:51.000Z","updated_at":"2024-06-24T11:40:21.000Z","dependencies_parsed_at":"2024-11-05T21:40:48.963Z","dependency_job_id":"adee2611-b260-4b33-8619-a84878a1b47e","html_url":"https://github.com/Cleveroad/cr_json_widget","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cleveroad%2Fcr_json_widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cleveroad%2Fcr_json_widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cleveroad%2Fcr_json_widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cleveroad%2Fcr_json_widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cleveroad","download_url":"https://codeload.github.com/Cleveroad/cr_json_widget/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248138008,"owners_count":21053775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T21:35:48.998Z","updated_at":"2025-04-10T00:38:21.883Z","avatar_url":"https://github.com/Cleveroad.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cr_json_widget\n\nThis widget visualises a tree structure, where a node can be any widget.\n\n## Examples\n\n\u003cimg src=\"https://raw.githubusercontent.com/Cleveroad/cr_json_widget/master/screenshots/screenshot-1.png\" height=\"500\"\u003e  \u003cimg src=\"https://raw.githubusercontent.com/Cleveroad/cr_json_widget/master/screenshots/screenshot-2.png\" height=\"500\"\u003e\n\n## Getting Started\n\n1. Add plugin to your project:\n    ```yaml\n    dependencies:\n        cr_json_widget: ^1.1.0\n    ```\n\n## Usage\n\n### CrJsonWidget\n#### This widget display all children as simple ListView and that it does not have good performance with huge jsons. \n1. Create JsonController:\n    ```dart\n    final _jsonController = JsonController(\n        allNodesExpanded: false,\n        uncovered: 3,\n    );\n    ```\n   `allNodesExpanded` - Sets whether the json tree is expanded by default\n\n   `uncovered` - Sets the value to what nesting by default the json tree will be expanded\n2. Add widget:\n   2.1 Accepts json as Map \u003cString, Any\u003e and builds the tree automatically:\n    ```dart\n        ...\n        final data = \u003cString, dynamic\u003e{\n            'integer': 1, \n            'string': 'test', \n        }\n        ...\n        CrJsonWidget(\n            ..\n            json: data\n        )\n        ...\n    ```\n   2.2 Accepts your custom List \u003cJsonNode\u003e, for placement in the form of a tree:\n    ```dart\n        CrJsonWidget(\n            ..\n        jsonNodes: [\n            JsonNode(\n                content: const Text(\n                    'root1',\n                    style: TextStyle(\n                        fontWeight: FontWeight.bold,\n                        color: Colors.red,\n                    ),\n                ),\n            ),\n            JsonNode(\n                content: const Text(\n                    'root2',\n                    style: TextStyle(\n                        fontWeight: FontWeight.bold,\n                        color: Colors.deepPurpleAccent,\n                    ),\n                ),\n                children: [\n                    JsonNode(\n                        content: const Text('child21'),\n                    ),\n                    JsonNode(\n                        content: const Text('child22'),\n                    ),\n                    JsonNode(\n                        content: const Text('root23'),\n                        children: [\n                            JsonNode(\n                                content: const Text('child231'),\n                            ),\n                        ],\n                        ),\n                    ],\n                ),\n            ],\n        ),\n    ```\n\nFull implementation example:\n\n```dart\n    ...\n    CrJsonWidget(\n        iconOpened: Icon(\n            Icons.arrow_drop_down,\n            size: _iconSize,\n        ),\n        iconClosed: Icon(\n            Icons.arrow_right,\n            size: _iconSize,\n        ),\n        indentHeight: 5,\n        indentLeftEndJsonNode: _iconSize,\n        jsonNodes: [\n            JsonNode(\n                content: const Text(\n                    'root1',\n                    style: TextStyle(\n                        fontWeight: FontWeight.bold,\n                        color: Colors.red,\n                    ),\n                ),\n            ),\n            JsonNode(\n                content: const Text(\n                    'root2',\n                    style: TextStyle(\n                        fontWeight: FontWeight.bold,\n                        color: Colors.deepPurpleAccent,\n                    ),\n                ),\n                children: [\n                    JsonNode(\n                        content: const Text('child21'),\n                    ),\n                    JsonNode(\n                        content: const Text('child22'),\n                    ),\n                    JsonNode(\n                        content: const Text('root23'),\n                        children: [\n                            JsonNode(\n                                content: const Text('child231'),\n                            ),\n                        ],\n                        ),\n                    ],\n                ),\n            ],\n        jsonController: _jsonController,\n    ),\n```\n\n`iconOpened` - Custom icon for opening a node\n\n`iconClosed` - Custom icon for closing a node\n\n`indentHeight` - Vertical indent between levels\n\n`indentWidth` - Horizontal indent between levels\n\n`indentLeftEndJsonNode` - The starting position of the ending node ***(Recommended size is the size\nof the icon)***\n\n`json` - Parsed json\n\n`jsonNodes` - List of root level json nodes\n\n`jsonController` - Json controller to manage the json state\n\n### Json Recycler Widgets\n#### Use these widgets, if you have huge jsons. Since these widgets have builders, huge jsons don't affect its performance in any way.\n\n1. Create JsonRecyclerController:\n```dart\n      final _jsonController = JsonRecyclerController(\n      saveClosedHistory: false,\n      showStandardJson: false,\n      isExpanded: true,\n    );\n```\n\n`isExpanded` - Sets whether the json tree is expanded by default\n\n`saveClosedHistory` - The parameter defines whether the previously opened child tabs should be saved\nor not\n\n`showStandardJson` - Will show json with curly braces\n\n`jsonKeyColor` - Json key color in the tree\n\n`intColor` - Set color of int parameters in the tree of json\n\n`doubleColor` - Set color of double parameters in the tree of json\n\n`stringColor`- Set color of string parameters in the tree of json\n\n`nullColor`- Set color of null parameters in the tree of json\n\n`boolColor` - Set color of bool parameters in the tree of json\n\n`objectColor` - Set color of object parameters in the tree of json\n\n`standardJsonBackgroundColor` - Set background color of widget\n\n`iconOpened` - Custom icon for opening a node\n\n`iconClosed` - Custom icon for closing a node\n\n`fontStyle` - Set font style of text. By default, the inherited style used\n\n`fontWeight` - Set font weight of text. By default FontWeight.bold\n\n`horizontalSpaceMultiplier`- The distance by which the left child element will be offset from the\nparent\n\n`verticalOffset` - The space by which the child element will be offset from the parent\n\n`additionalIndentChildElements` - Additional indentation for aligning child elements depending on\nthe size of the parent icon\n\n2. Add widget:\n\n❗ Since the CrJsonRecyclerWidget has a builder in it, you must set the height or you will get an\nerror\n\n   **2.1 CrJsonRecyclerWidget:**\n   ```dart\n        ...\n        final data = \u003cString, dynamic\u003e{\n            'integer': 1, \n            'string': 'test', \n        }\n        ...\n       CrJsonRecyclerWidget(\n             ..\n              json: data,\n            ),\n        ...\n   ```\n\n`json` - Parsed json\n\n`jsonController` - Json controller to manage the json state\n\n`rootExpanded` - Whether to expand the root nesting by default\n\nFull implementation example:\n\n```dart\n      ...\n      Expanded(\n          child: CrJsonRecyclerWidget(\n            json: json,\n            jsonController: _jsonController,\n            rootExpanded: true,\n          ),\n        ),\n      ...\n```\n   **2.2 CrJsonRecyclerSliver:**\n   ```dart\n        ...\n        final data = \u003cString, dynamic\u003e{\n            'integer': 1, \n            'string': 'test', \n        }\n        ...\n              CrJsonRecyclerSliver(\n                 ...\n                  json: json,\n              ),\n       ...\n   ```\n\n`json` - Parsed json\n\n`jsonController` - Json controller to manage the json state\n\n`rootExpanded` - Whether to expand the root nesting by default\n\nFull implementation example:\n\n```dart\n        ...\n        CustomScrollView(\n              slivers: [\n                    CrJsonRecyclerSliver(\n                          jsonController: _jsonController,\n                          json: json,\n                          rootExpanded: true,\n                    ),\n              ],\n          ),\n        ...\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcleveroad%2Fcr_json_widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcleveroad%2Fcr_json_widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcleveroad%2Fcr_json_widget/lists"}