JSON Inspector

A Flutter package that provides an interactive JSON viewer with features like expanding/collapsing nodes, selecting values, and copying to clipboard. Perfect for debugging, data inspection, and JSON visualization needs.

Features

• 🌳 Interactive tree view of JSON data
• 🔍 Expandable/collapsible nodes for objects and arrays
• ✨ Node selection with highlight
• 📋 Copy to clipboard functionality
• 🎨 Customizable styles for keys and values
• 📊 Visual indicators for array length and object key count
• 🎯 Support for all JSON data types
• 📱 Responsive and scrollable interface

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  json_inspector: ^0.0.1

Usage

Basic Usage

import 'package:json_inspector/json_inspector.dart';

// Your JSON data
final jsonData = {
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "New York"
  },
  "hobbies": ["reading", "gaming", "cooking"]
};

// Use it in your widget tree
JsonInspector(
  jsonData: jsonData,
  initiallyExpanded: true, // Optional: expand all nodes initially
)

Customization

JsonInspector(
  jsonData: jsonData,
  initiallyExpanded: false,
  keyStyle: TextStyle(
    color: Colors.purple,
    fontWeight: FontWeight.bold,
  ),
  valueStyle: TextStyle(
    color: Colors.green,
  ),
)

Features in Detail

1. Interactive Expansion

• Click on arrows to expand/collapse nodes
• Use initiallyExpanded parameter to control initial state

2. Selection and Copying

• Click anywhere on a line to select it
• Long press to copy the value to clipboard
• Visual feedback for selected items

3. Visual Indicators

• Arrays show item count: [3 items]
• Objects show key count: {2 keys}
• Color-coded keys and values for better readability

4. Type Support

• Null values
• Booleans
• Numbers
• Strings
• Arrays
• Objects

Example

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final jsonData = {
      "user": {
        "id": 1,
        "name": "John Doe",
        "isActive": true,
        "favorites": [
          "pizza",
          "coding",
          null
        ]
      }
    };

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('JSON Inspector Demo')),
        body: JsonInspector(
          jsonData: jsonData,
          initiallyExpanded: true,
        ),
      ),
    );
  }
}

Additional Information

Requirements

• Dart SDK: ">=2.17.0 <4.0.0"
• Flutter: ">=3.0.0"

Contributions

Contributions are welcome! If you find a bug or want a feature, please:

1. Open an issue
2. Create a pull request with your changes

License

This project is licensed under the MIT License - see the LICENSE file for details.

Getting Started with Development

1. Clone the repository:

   git clone https://github.com/Neelansh-ns/json_inspector.git

2. Install dependencies:

   flutter pub get

3. Run the example:

   cd example
   flutter run

Author

Neelansh Sethi

• GitHub: @Neelansh-ns
• Twitter: @neelansh_ns

Acknowledgments

• Inspired by various JSON viewers in developer tools
• Built with Flutter for the community