json_tree_view 0.0.4

A Flutter widget to display JSON data in a tree view format.

Json Tree View

A Flutter component for displaying JSON data in a collapsible tree structure, making it easier to view and browse complex JSON objects during debugging or presentation scenarios.

Features

• Flexible customization Provides full control over presentation through customizable styles (JsonStyle) and pluggable widget builders (JsonWidgetBuilder), allowing you to tailor the JSON view to your exact UI and interaction requirements.
• Configurable default expansion level Supports defining a default expansion depth for JSON structures, enabling large or deeply nested data to be displayed in a readable and predictable way on initial render.
• Persistent expansion state Remembers the expand and collapse state of nodes across rebuilds, ensuring a stable and consistent user experience during updates and interactions.

Screenshots

Platform	Light Theme	Dark Theme	Video Demo
Phone
Web/Desktop

Installation

Add to your pubspec.yaml:

dependencies:
  json_tree_view: latest

Then run:

flutter pub get

Usage Example

import 'package:flutter/material.dart';
import 'package:json_tree_view/json_tree_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final _jsonStr = '''
    {
        "name": "Alice",
        "age": 30,
        "tags": ["flutter", "dart"],
        "address": {"city": "Beijing", "zip": "100000"}
    }
    ''';

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JSON Tree View Example')),
        body: Padding(
          padding: EdgeInsets.all(12),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: JsonTreeView(_jsonStr),
            ),
          ),
        ),
      ),
    );
  }
}

Configuration

JsonTreeView supports the following common parameters:

• json: dynamic, required, the JSON data to be displayed
• initialExpandedDepth: int, default 0, controls the initial expanded level

Example configuration:

JsonTreeView(
  data: myJsonMap,
  initialExpandedDepth: 1,
);

License

MIT License. See the LICENSE file in the project for details.