treeView

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Inspectable Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: Viewer(
            root: Node(
              widget: NodeWidget('Root'),
              children: [
                Node(
                    widget: NodeWidget('Sub 1'),
                    children: [
                      Node(
                          widget: NodeWidget('Sub 1 - 1'),
                          children: []
                      ),
                      Node(
                          widget: NodeWidget('Sub 1 - 2'),
                          children: [
                            Node(
                                widget: NodeWidget('Sub 1 - 2 - 1'),
                                children: []
                            ),
                            Node(
                                widget: NodeWidget('Sub 1 - 2 - 2'),
                                children: [
                                  Node(
                                      widget: NodeWidget('Sub 1 - 2 - 2 - 1'),
                                      children: []
                                  ),
                                  Node(
                                      widget: NodeWidget('Sub 1 - 2 - 2 - 2'),
                                      children: []
                                  ),
                                  Node(
                                      widget: NodeWidget('Sub 1 - 2 - 2 - 3'),
                                      children: []
                                  ),
                                ]
                            ),
                            Node(
                                widget: NodeWidget('Sub 1 - 2 - 3'),
                                children: []
                            ),
                          ]
                      ),
                      Node(
                          widget: NodeWidget('Sub 1 - 3'),
                          children: []
                      ),
                      Node(
                          widget: NodeWidget('Sub 1 - 4'),
                          children: []
                      ),
                    ]
                ),
                Node(
                    widget: NodeWidget('Sub 2'),
                    children: []
                ),
                Node(
                    widget: NodeWidget('Sub 3'),
                    children: []
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class NodeWidget extends StatelessWidget {
  final String text;

  const NodeWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

class Viewer extends StatefulWidget {
  final Node root;
  final double initialPadding;
  final double depthPadding;
  final double nodeHeight;

  const Viewer({
    Key? key,
    required this.root,
    this.initialPadding = 16.0,
    this.depthPadding = 20.0,
    this.nodeHeight = 48.0,
  }) : super(key: key);

  @override
  _ViewerState createState() => _ViewerState();
}

class _ViewerState extends State<Viewer> {
  final _expandingNodes = <Node>[];

  @override
  Widget build(BuildContext context) {
    var rows = <Widget>[];

    void appendRowRecursively(Node node, int depth) {
      rows.add(
        InkWell(
          onTap: () {
            setState(() {
              if (_expandingNodes.contains(node)) {
                _expandingNodes.remove(node);
              } else {
                _expandingNodes.add(node);
              }
            });
          },
          child: Container(
            height: widget.nodeHeight,
            padding: EdgeInsets.only(left: widget.initialPadding + (widget.depthPadding * depth)),
            child: Row(
              children: [
                if (node.children.isNotEmpty)
                  Icon(
                    _expandingNodes.contains(node)
                        ? Icons.expand_more
                        : Icons.chevron_right_outlined,
                    size: 20,
                  ),
                const SizedBox(width: 4),
                node.widget,
              ],
            ),
          ),
        ),
      );

      if (_expandingNodes.contains(node)) {
        for (final child in node.children) {
          appendRowRecursively(child, depth + 1);
        }
      }
    }

    appendRowRecursively(widget.root, 0);

    return SingleChildScrollView(
      child: Column(
        children: rows,
      ),
    );
  }
}

/// Node of a tree, representing one Widget
class Node {

  final Widget widget;

  /// Descendant nodes.
  final List<Node> children;

  Node({
    required this.widget,
    required this.children,
  });
}

Dartpad

tree-view.mp4