Super Tree

Demo tree preview

A high-performance, fully customizable, and platform-agnostic hierarchical tree view for Flutter.

Build complex tree structures like File Explorers, Todo Lists, or Permission Trees with ease.

Key Features

  • High Performance: Flat-list architecture for smooth scrolling.
  • Fully Customizable: Builders and styling.
  • Desktop and Mobile Ready: Keyboard nav, context menus, drag-and-drop.
  • State Management: Optional controller for expansion, selection, updates.
  • Prebuilt Widgets: Ready-to-use file-system and todo trees.
  • Search and Selection: Fuzzy search and multi-selection.

Getting Started

Add super_tree to your pubspec.yaml:

dependencies:
  super_tree: ^0.2.1

flutter pub add super_tree

Usage

Simple Tree View

Building a tree is as simple as providing a list of nodes:

import 'package:super_tree/super_tree.dart';

SuperTreeView<String>(
  roots: [
    TreeNode(
      id: 'root',
      data: 'Documents',
      children: [
        TreeNode(id: 'child1', data: 'Resume.pdf'),
        TreeNode(id: 'child2', data: 'Budget.xlsx'),
      ],
    ),
  ],
  prefixBuilder: (context, node) => Icon(
    node.hasChildren ? Icons.folder : Icons.insert_drive_file,
  ),
  contentBuilder: (context, node, renameField) => Text(node.data),
)

Advanced Usage with Controller

For dynamic updates and interaction handling, use TreeController<T>:

final controller = TreeController<MyData>(
  roots: initialRoots,
  onNodeRenamed: (node, newName) => print('Renamed to $newName'),
);

// Toggle programmatically
controller.expandAll();
controller.addRoot(newNode);

controller.search("query");

Current in-repo previews:

File System Explorer + Search
File System Explorer with search active		 Checkbox State
Checkbox state example on macOS desktop layout
Complex Node UI
Complex node UI example on macOS desktop layout		 Todo Tree
Todo tree example on macOS desktop layout
Minimal File System
Minimal file system example on macOS desktop layout

Notes:

  • Screenshot generation uses flutter test --update-goldens in example/test/generate_previews_test.dart.
  • GIF creation is optional and requires ffmpeg.
  • Canonical screenshot assets are stored in assets/screenshots/ and committed to the repo.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request or open an issue.

License

MIT

Libraries

super_tree