Flutter JSON数据可视化插件 json_inspector 的使用

简介

json_inspector 是一个Flutter包，提供了交互式的JSON查看器。它支持展开/折叠节点、选择值和复制到剪贴板等功能，非常适合调试、数据检查和JSON可视化需求。

特性

• 🌳 交互式JSON树视图
• 🔍 对象和数组的可展开/折叠节点
• ✨ 节点选择与高亮显示
• 📋 复制到剪贴板功能
• 🎨 自定义键和值的样式
• 📊 数组长度和对象键数量的可视化指示器
• 🎯 支持所有JSON数据类型
• 📱 响应式且可滚动的界面

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  json_inspector: ^0.0.1

使用方法

基本用法

import 'package:json_inspector/json_inspector.dart';

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

// 在小部件树中使用
JsonInspector(
  jsonData: jsonData,
  initiallyExpanded: true, // 可选：初始时展开所有节点
)

自定义

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

示例Demo

以下是一个完整的示例项目，演示如何使用json_inspector插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSON Inspector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 示例复杂的JSON数据
  final Map<String, dynamic> complexJson = {
    "id": 123456,
    "user": {
      "name": "John Doe",
      "email": "john@example.com",
      "age": 30,
      "isVerified": true,
      "lastLogin": null,
      "address": {
        "street": "123 Main St",
        "city": "New York",
        "country": "USA",
        "coordinates": {"lat": 40.7128, "lng": -74.0060}
      }
    },
    "orders": [
      {
        "orderId": "ORD-001",
        "items": [
          {"productId": "P1", "name": "Laptop", "price": 999.99, "quantity": 1},
          {"productId": "P2", "name": "Mouse", "price": 29.99, "quantity": 2}
        ],
        "total": 1059.97,
        "status": "delivered"
      },
      {
        "orderId": "ORD-002",
        "items": [
          {"productId": "P3", "name": "Keyboard", "price": 79.99, "quantity": 1}
        ],
        "total": 79.99,
        "status": "pending"
      }
    ],
    "preferences": {
      "notifications": {"email": true, "push": false, "sms": true},
      "theme": "dark",
      "language": "en"
    },
    "tags": ["premium", "loyal-customer", "early-adopter"],
    "metadata": {
      "lastUpdated": "2024-03-12T10:30:00Z",
      "version": "2.0",
      "debug": {
        "sessionId": "sess_12345",
        "clientVersion": "1.2.3",
        "features": ["beta", "experimental"]
      }
    }
  };

  bool _expandAll = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('JSON Inspector Example'),
        actions: [
          IconButton(
            icon: Icon(_expandAll ? Icons.unfold_less : Icons.unfold_more),
            onPressed: () {
              setState(() {
                _expandAll = !_expandAll;
              });
            },
            tooltip: _expandAll ? 'Collapse All' : 'Expand All',
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Interactive JSON Viewer',
                style: Theme.of(context).textTheme.headlineSmall,
              ),
            ),
            const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                '• Click arrows to expand/collapse\n'
                '• Click anywhere to select\n'
                '• Long press to copy values',
                style: TextStyle(color: Colors.grey),
              ),
            ),
            Expanded(
              child: Card(
                child: JsonInspector(
                  jsonData: complexJson,
                  initiallyExpanded: _expandAll,
                  keyStyle: const TextStyle(
                    color: Colors.purple,
                    fontWeight: FontWeight.w500,
                  ),
                  valueStyle: const TextStyle(
                    color: Colors.green,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

额外信息

要求

• Dart SDK: “>=2.17.0 <4.0.0”
• Flutter: “>=3.0.0”

贡献

欢迎贡献！如果你发现任何问题或需要新功能，请：

1. 打开一个问题
2. 提交带有你更改的拉取请求

许可证

该项目根据MIT许可证发布 - 请参阅LICENSE文件以获取详细信息。

开发入门

1. 克隆仓库：

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

2. 安装依赖：

   flutter pub get
   

3. 运行示例：

   cd example
   flutter run
   

作者

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

致谢

• 受各种开发者工具中的JSON查看器启发
• 使用Flutter为社区构建