Tree

A keyboard-navigable, collapsible tree.

See also: TreeTable for rows with columns.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Tree<String>(
  semanticLabel: 'project',
  // Start with the top-level branches expanded.
  initialExpandedDepth: 1,
  roots: <TreeNode<String>>[
    TreeNode<String>(
      'lib/',
      children: <TreeNode<String>>[
        const TreeNode<String>('main.dart'),
        TreeNode<String>(
          'src/',
          children: const <TreeNode<String>>[
            TreeNode<String>('app.dart'),
            TreeNode<String>('theme.dart'),
          ],
        ),
      ],
    ),
    const TreeNode<String>('README.md'),
  ],
)

Details

Flattens the expanded hierarchy into rows and renders them through a ListView (so it inherits selection, scrolling, and auto-scroll for free). On top of that:

• Up/Down move the selection; PageUp/PageDown and Home/End jump (from ListView).
• Right expands a collapsed branch, or steps into the first child of an expanded one.
• Left collapses an expanded branch, or steps out to the parent.
• Enter or a click toggles a branch, or calls onSelect for a leaf.

Left/Right return to the focus chain when they’d do nothing (a leaf, a top-level collapsed node), so the tree composes with pane traversal.

Constructors

Tree()

Parameter	Type	Default	Description
roots:	List<TreeNode<T>>	required	Top-level nodes, whose object identities also anchor expansion state.
semanticLabel:	String	'Tree'	Semantic label for the complete tree.
focusNode:	FocusNode?	—	Focus node used for keyboard navigation.
autofocus:	bool	false	Whether the tree should request focus when mounted.
onSelect:	void Function(TreeNode<T> node)?	—	Called with a leaf node (one without children) when the user activates it with Enter or a click. On a branch, those expand or collapse it instead.
typeahead:	bool	true	Whether typing a printable character jumps the selection to the next visible node whose label starts with it (WAI-ARIA treeview type-ahead). On by default. Turn it off when the surrounding app binds bare printables (a vim-style command key, a q quit): a focused tree with type-ahead on consumes every printable before those bindings see it.
selectedStyle:	CellStyle?	—	Style for the selected row. Defaults to the theme’s selection style.
initialExpandedDepth:	int	0	Branch nodes shallower than this depth start expanded. 0 (the default) leaves every branch collapsed; 1 expands the roots, 2 their children, and so on. Changes after mount do not reset expansion.

Source

Tree is defined in packages/fleury/lib/src/catalog/tree.dart.

Category: Lists & data · All widgets

Live demo

tree_example.dart

Restart Run Expand

Example · editable Revert Format

Widget example() => Tree<String>(
  semanticLabel: 'project',
  // Start with the top-level branches expanded.
  initialExpandedDepth: 1,
  roots: <TreeNode<String>>[
    TreeNode<String>(
      'lib/',
      children: <TreeNode<String>>[
        const TreeNode<String>('main.dart'),
        TreeNode<String>(
          'src/',
          children: const <TreeNode<String>>[
            TreeNode<String>('app.dart'),
            TreeNode<String>('theme.dart'),
          ],
        ),
      ],
    ),
    const TreeNode<String>('README.md'),
  ],
);

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand