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

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

功能特性

• 美观展示JSON数据；
• 自定义JSON元素颜色；
• 支持复制键或值文本；

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
    json_tree_viewer: ^0.0.2

屏幕截图

使用方法

以下是一个完整的示例代码，展示了如何在Flutter应用中使用json_tree_viewer插件来可视化JSON数据。这个示例包括了一个可以切换显示JSON对象和JSON数组的界面，并且可以通过按钮展开或折叠所有节点。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _expandedAll = false; // 控制是否展开所有节点
  final _toggleObject = [true, false]; // 控制切换JSON对象和数组

  // 定义一个JSON数组
  final _jsonArray = [
    {"message": "Hello world", "year": 2022},
    {"message": "你好世界", "year": 2022}
  ];

  // 定义一个JSON对象
  final _jsonObject = <String, dynamic>{
    "message": ["你好世界", "Hello world"],
    "date": {"year": 2022, "month": 1, "day": 29},
    "cities": [
      {
        "name": "Beijing",
        "country": "China",
        "whereami": false,
      },
      {
        "name": "Shanghai",
        "country": "China",
        "whereami": true,
      },
      {"name": "Tokyo", "country": "Japan"}
    ]
  };

  dynamic _data; // 当前显示的数据

  [@override](/user/override)
  void initState() {
    _data = _jsonObject; // 初始化时显示JSON对象
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Json Viewer'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              // 展开所有节点按钮
              IconButton(
                onPressed: () {
                  setState(() {
                    _expandedAll = true;
                  });
                },
                icon: Icon(Icons.unfold_more),
              ),
              // 折叠所有节点按钮
              IconButton(
                onPressed: () {
                  setState(() {
                    _expandedAll = false;
                  });
                },
                icon: Icon(Icons.unfold_less),
              ),
              const SizedBox(width: 16),
              // 切换JSON对象和数组的按钮
              ToggleButtons(
                children: [Text('Object'), Text('Array')],
                isSelected: _toggleObject,
                onPressed: (index) {
                  setState(() {
                    _toggleObject.fillRange(0, _toggleObject.length, false);
                    _toggleObject[index] = true;
                    switch (index) {
                      case 0:
                        _data = _jsonObject;
                        break;
                      case 1:
                        _data = _jsonArray;
                        break;
                    }
                  });
                },
              )
            ],
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: JsonTreeViewer(
                data: _data, // 显示的数据
                expandedAll: _expandedAll, // 是否展开所有节点
              ),
            ),
          ),
        ],
      ),
    );
  }
}