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

flutter_json_viewer

flutter_json_viewer 是一个用于 Flutter 的 JSON 查看器小部件。它经过更新，支持空安全，并在根级别添加了对数组的支持。

该库是从 flutter_json_widget 分支出来的。

使用该库

该库的 GitHub 仓库中的 /example/ 文件夹包含了一个完整的 Flutter 应用程序，其中包含了示例演示。

在 Dart 开发者网站上使用该库

1. 添加依赖

将以下内容添加到您的项目的 pubspec.yaml 文件中：

dependencies:
  flutter_json_viewer2: ^1.0.1

2. 安装依赖

通过命令行安装包：

$ flutter pub get

或者，您可以使用编辑器的 flutter pub get 功能。查阅您的编辑器文档以了解更多信息。

3. 导入库

在 Dart 代码中导入库：

import 'package:flutter_json_viewer2/flutter_json_viewer.dart';

4. 显示 JSON 数据

使用 JsonViewer 小部件来显示 JSON 数据：

Container(
  child: JsonViewer(jsonObj, key: b, isOpen: state, onTap: onTap),
)

示例代码

以下是使用 flutter_json_viewer2 的完整示例代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_json_viewer2/flutter_json_viewer.dart';

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

const testStringObj = '''{
      "ParaString": "www.apigj.com",
      "ParaObject": {
        "ObjectType": "Api",
        "ObjectName": "Manager",
        "ObjectId": "Code",
        "FatherId": "Generator"
      },
      "ParaLong": 6222123188092928,
      "ParaInt": 5303,
      "ParaFloat": -268311581425.664,
      "ParaBool": false,
      "ParaArrString": [
        "easy",
        "fast"
      ],
      "ParaArrObj": [
        {
          "SParaString": "Work efficiently long words long words long words long words long words long words long words long words long words long words long words long words long words ",
          "SParaLong": 7996655703949312,
          "SParaInt": 8429,
          "SParaFloat": -67669103057.3056,
          "SParaBool": false,
          "SParaArrString": [
            "har",
            "zezbehseh"
          ],
          "SParaArrLong": [
            6141464276893696,
            2096646955466752
          ],
          "SParaArrInt": [
            1601,
            757
          ],
          "SParaArrFloat": [
            -643739466439.0656,
            -582978647149.7728
          ],
          "SParaArrBool": [
            false,
            false
          ]
        },
        {
          "SParaString": "Let's go",
          "SParaLong": 641970970034176,
          "SParaInt": 37,
          "SParaFloat": 556457726574.592,
          "SParaBool": false,
          "SParaArrString": [
            "miw",
            "aweler"
          ],
          "SParaArrLong": [
            3828767638159360,
            7205915801419776
          ],
          "SParaArrInt": [
            1187,
            6397
          ],
          "SParaArrFloat": [
            -744659811617.9968,
            494621489417.4208
          ],
          "SParaArrBool": [
            true,
            false
          ]
        }
      ],
      "ParaArrLong": [
        7607846344589312,
        7840335854043136
      ],
      "ParaArrInt": [
        2467,
        1733
      ],
      "ParaArrFloat": [
        759502472845.7216,
        -157877664743.424
      ],
      "ParaArrBool": [
        true,
        true
      ]
    }''';

const testArray = [
  {
    "id": 1,
    "array": [
      {'nested': true}
    ],
  },
  {
    "id": 2,
    "array": [
      {'nested': false}
    ],
  }
];

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JsonViewerExample',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _MyHomePage();
  }
}

class _MyHomePage extends State<MyHomePage> {
  final testObj = json.decode(testStringObj);
  bool state = true;
  GlobalKey<JsonViewerState> a = GlobalKey<JsonViewerState>();
  GlobalKey<JsonViewerState> b = GlobalKey<JsonViewerState>();

  void onTap(dynamic a) {
    print("TAPPED THING JSON");
    print(a);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test json widget"),
        actions: [
          IconButton(
            onPressed: () {
              if (a.currentState != null) {
                a.currentState!.changeOpeningState(state);
              }
              if (b.currentState != null) {
                b.currentState!.changeOpeningState(state);
              }
              state = !state;
            },
            icon: Icon(Icons.expand),
          )
        ],
      ),
      body: SafeArea(
        child: ListView(
          children: [
            JsonViewer(testObj, key: b, isOpen: state, onTap: onTap),
            Text('Array example'),
            JsonViewer(testArray, key: a, isOpen: state, onTap: onTap),
          ],
        ),
      ),
    );
  }
}