json_tree_view 0.0.4

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

example/lib/main.dart

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

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

final _themeModeNotifier = ValueNotifier(ThemeMode.light);

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

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: _themeModeNotifier,
      builder: (context, themeMode, child) {
        return MaterialApp(
          title: 'Json Tree View',
          debugShowCheckedModeBanner: false,
          theme: ThemeData.light(),
          darkTheme: ThemeData.dark(),
          themeMode: themeMode,
          home: const MyHomePage(),
        );
      },
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  String _jsonStr = _json;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Json Tree View'),
        actions: [
          ValueListenableBuilder(
            valueListenable: _themeModeNotifier,
            builder: (context, themeMode, child) {
              return IconButton(
                onPressed: () {
                  _themeModeNotifier.value = switch (themeMode) {
                    ThemeMode.light => ThemeMode.dark,
                    ThemeMode.dark => ThemeMode.light,
                    _ => throw 'error',
                  };
                },
                icon: Icon(switch (themeMode) {
                  ThemeMode.light => Icons.light_mode_rounded,
                  ThemeMode.dark => Icons.dark_mode_rounded,
                  _ => throw 'error',
                }),
              );
            },
          ),
        ],
      ),
      body: SafeArea(
        child: SizedBox.expand(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: SizedBox(
                  width: double.infinity,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                      child: JsonTreeView(_jsonStr),
                    ),
                  ),
                ),
              ),
              Row(
                children: [
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        _jsonStr = _json;
                      });
                    },
                    child: const Text('Load Valid Json'),
                  ),
                  const SizedBox(width: 16),
                  ElevatedButton(
                    onPressed: () {
                      setState(() {
                        _jsonStr = _jsonErr;
                      });
                    },
                    child: const Text('Load Error Json'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

const _jsonErr = '''{"data":{"curPage":2,"d''';
const _json =
    '''{"data":{"curPage":2,"datas":[{"adminAdd":false,"apkLink":null,"audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30924,"isAdminAdd":false,"link":"https://juejin.cn/post/7566905588787462186","niceDate":"2025-11-02 15:00","niceShareDate":"2025-11-02 14:56","origin":"","prefix":"","projectLink":"","publishTime":1762066841000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1762066571000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"一次崩溃率暴涨 10 倍的线上事故：从&ldquo;无堆栈&rdquo;到精准定位，到光速解决","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30925,"isAdminAdd":false,"link":"https://juejin.cn/post/7566524333696794665","niceDate":"2025-11-02 15:00","niceShareDate":"2025-11-02 14:57","origin":"","prefix":"","projectLink":"","publishTime":1762066837000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1762066641000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"Android 中 `runBlocking` 其实只有一种使用场景","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30926,"isAdminAdd":false,"link":"https://juejin.cn/post/7564760199636795438","niceDate":"2025-11-02 15:00","niceShareDate":"2025-11-02 14:58","origin":"","prefix":"","projectLink":"","publishTime":1762066833000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1762066697000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"Android 5 到 16 期间 service 的发展","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30927,"isAdminAdd":false,"link":"https://juejin.cn/post/7565798770320982031","niceDate":"2025-11-02 15:00","niceShareDate":"2025-11-02 15:00","origin":"","prefix":"","projectLink":"","publishTime":1762066831000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1762066817000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"KMP实战：从单端到跨平台的完整迁移指南","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"张鸿洋","canEdit":false,"chapterId":543,"chapterName":"Android技术周报","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30911,"isAdminAdd":false,"link":"https://www.wanandroid.com/blog/show/3827","niceDate":"2025-10-29 00:00","niceShareDate":"2025-10-29 00:10","origin":"","prefix":"","projectLink":"","publishTime":1761667200000,"realSuperChapterId":542,"selfVisible":0,"shareDate":1761667800000,"shareUser":"","superChapterId":543,"superChapterName":"技术周报","tags":[],"title":"Android 技术周刊 （2025-10-22 ~ 2025-10-29）","type":0,"userId":-1,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30900,"isAdminAdd":false,"link":"https://juejin.cn/post/7564722725816107023","niceDate":"2025-10-26 14:15","niceShareDate":"2025-10-26 14:09","origin":"","prefix":"","projectLink":"","publishTime":1761459308000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761458969000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"Kotlin Flow的6个必知高阶技巧","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30901,"isAdminAdd":false,"link":"https://juejin.cn/post/7563910479007105024","niceDate":"2025-10-26 14:15","niceShareDate":"2025-10-26 14:09","origin":"","prefix":"","projectLink":"","publishTime":1761459307000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761458988000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"酷炫的文字效果 &mdash; Compose 文本着色","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30902,"isAdminAdd":false,"link":"https://juejin.cn/post/7564327887218819082","niceDate":"2025-10-26 14:15","niceShareDate":"2025-10-26 14:10","origin":"","prefix":"","projectLink":"","publishTime":1761459305000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459054000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"【http3/quic】cronet 已经原生集成在Android内啦！还不快来开开眼！","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30903,"isAdminAdd":false,"link":"https://juejin.cn/post/7564243873872740402","niceDate":"2025-10-26 14:15","niceShareDate":"2025-10-26 14:11","origin":"","prefix":"","projectLink":"","publishTime":1761459303000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459092000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"一次讲清楚 Kotlin 的 suspend 关键字到底做了什么？","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30904,"isAdminAdd":false,"link":"https://juejin.cn/post/7563205340143075374","niceDate":"2025-10-26 14:15","niceShareDate":"2025-10-26 14:13","origin":"","prefix":"","projectLink":"","publishTime":1761459301000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459181000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"Labubu很难买？那是因为还没有用Compose来画一个","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30905,"isAdminAdd":false,"link":"https://juejin.cn/post/7562840792685264939","niceDate":"2025-10-26 14:14","niceShareDate":"2025-10-26 14:13","origin":"","prefix":"","projectLink":"","publishTime":1761459299000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459191000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"SeLinux 全面详解","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30906,"isAdminAdd":false,"link":"https://juejin.cn/post/7561685130789437478","niceDate":"2025-10-26 14:14","niceShareDate":"2025-10-26 14:13","origin":"","prefix":"","projectLink":"","publishTime":1761459297000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459226000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"玩Android Harmony next版","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30907,"isAdminAdd":false,"link":"https://juejin.cn/post/7561683833382486042","niceDate":"2025-10-26 14:14","niceShareDate":"2025-10-26 14:13","origin":"","prefix":"","projectLink":"","publishTime":1761459295000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459233000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"玩Android Flutter版本，通过项目了解Flutter项目快速搭建开发","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30908,"isAdminAdd":false,"link":"https://juejin.cn/post/7561642956664225807","niceDate":"2025-10-26 14:14","niceShareDate":"2025-10-26 14:14","origin":"","prefix":"","projectLink":"","publishTime":1761459293000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1761459274000,"shareUser":"鸿洋","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"【调试篇5】TransactionTooLargeException 原理解析","type":0,"userId":2,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"张鸿洋","canEdit":false,"chapterId":543,"chapterName":"Android技术周报","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30885,"isAdminAdd":false,"link":"https://www.wanandroid.com/blog/show/3825","niceDate":"2025-10-22 00:00","niceShareDate":"2025-10-22 00:10","origin":"","prefix":"","projectLink":"","publishTime":1761062400000,"realSuperChapterId":542,"selfVisible":0,"shareDate":1761063000000,"shareUser":"","superChapterId":543,"superChapterName":"技术周报","tags":[],"title":"Android 技术周刊 （2025-10-15 ~ 2025-10-22）","type":0,"userId":-1,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30874,"isAdminAdd":false,"link":"https://mp.weixin.qq.com/s/yrSrg-fY6Js9f2l2SEsJnw","niceDate":"2025-10-20 11:38","niceShareDate":"2025-10-20 11:38","origin":"","prefix":"","projectLink":"","publishTime":1760931534000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1760931534000,"shareUser":"[e-mail]","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"Kotlin Flow 的 emit 和 tryEmit 有什么区别","type":0,"userId":164286,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30868,"isAdminAdd":false,"link":"https://mp.weixin.qq.com/s/pMefUQkvnDxnswJGiYqFgw","niceDate":"2025-10-17 11:11","niceShareDate":"2025-10-17 11:11","origin":"","prefix":"","projectLink":"","publishTime":1760670708000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1760670708000,"shareUser":"鸿蒙开发笔记分享","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"鸿蒙实现自定义安全键盘","type":0,"userId":6544,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"","canEdit":false,"chapterId":502,"chapterName":"自助","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30867,"isAdminAdd":false,"link":"https://mp.weixin.qq.com/s/j5iF9Tzi11xiROlqYaA5Sw","niceDate":"2025-10-15 08:57","niceShareDate":"2025-10-15 08:57","origin":"","prefix":"","projectLink":"","publishTime":1760489844000,"realSuperChapterId":493,"selfVisible":0,"shareDate":1760489844000,"shareUser":"[e-mail]","superChapterId":494,"superChapterName":"广场Tab","tags":[],"title":"Compose 中实现凸角、凹角、切角、尖角","type":0,"userId":164286,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"张鸿洋","canEdit":false,"chapterId":543,"chapterName":"Android技术周报","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30865,"isAdminAdd":false,"link":"https://www.wanandroid.com/blog/show/3823","niceDate":"2025-10-15 00:00","niceShareDate":"2025-10-15 00:10","origin":"","prefix":"","projectLink":"","publishTime":1760457600000,"realSuperChapterId":542,"selfVisible":0,"shareDate":1760458200000,"shareUser":"","superChapterId":543,"superChapterName":"技术周报","tags":[],"title":"Android 技术周刊 （2025-10-06 ~ 2025-10-15）","type":0,"userId":-1,"visible":1,"zan":0},{"adminAdd":false,"apkLink":"","audit":1,"author":"鸿洋","canEdit":false,"chapterId":408,"chapterName":"鸿洋","collect":false,"courseId":13,"desc":"","descMd":"","envelopePic":"","fresh":false,"host":"","id":30956,"isAdminAdd":false,"link":"https://mp.weixin.qq.com/s/AlsGEQIN2LFMOvNqjglRgQ","niceDate":"2025-10-15 00:00","niceShareDate":"2025-11-16 20:20","origin":"","prefix":"","projectLink":"","publishTime":1760457600000,"realSuperChapterId":407,"selfVisible":0,"shareDate":1763295637000,"shareUser":"","superChapterId":408,"superChapterName":"公众号","tags":[{"name":"公众号","url":"/wxarticle/list/408/1"}],"title":"每个Kotlin开发者应该掌握的更佳实践：测试、性能优化、架构、KMP","type":0,"userId":-1,"visible":1,"zan":0}],"offset":20,"over":false,"pageCount":816,"size":20,"total":16317},"errorCode":0,"errorMsg":""}''';