Searchable Tree

A highly customizable Flutter tree view widget with built-in search support, expand/collapse functionality, and beautiful UI. Perfect for displaying hierarchical data structures with a great user experience.

Features

🔍 Built-in Search: Instant search functionality with automatic match highlighting
🎨 Highly Customizable: Customize colors, text styles, icons, and more to match your app's design
📱 Responsive Design: Auto-wrap text for long titles, smooth animations, and touch-friendly interactions
📊 Hierarchy Visualization: Indentation guide lines to clearly show tree structure
⚡ Performance Optimized: Efficient rendering even for large tree structures
🔧 Flexible Configuration: Enable/disable features as needed
🎯 Clean Separation of Events: Tap text for node actions, tap icon for expand/collapse

Demo

Getting started

Add the package to your pubspec.yaml:

dependencies:
  searchable_tree: ^0.0.1

Import the package in your Dart code:

import 'package:searchable_tree/searchable_tree.dart';

Usage

Basic Example

// Create tree nodes
final List<TreeNode> nodes = [
  TreeNode(
    title: 'Parent Node 1',
    children: [
      TreeNode(title: 'Child Node 1-1'),
      TreeNode(
        title: 'Parent Node 1-2',
        children: [
          TreeNode(title: 'Child Node 1-2-1'),
          TreeNode(title: 'Child Node 1-2-2'),
        ],
      ),
    ],
  ),
  TreeNode(title: 'Parent Node 2'),
];

// Use the widget
SearchableSilverTree(
  nodes: nodes,
  onNodeTap: (node) {
    print('Tapped node: ${node.title}');
  },
  onExpandToggle: (node, isExpanded) {
    print('Node ${node.title} is now ${isExpanded ? 'expanded' : 'collapsed'}');
  },
)

Customized Example

SearchableSilverTree(
  nodes: nodes,
  showSearchField: true,
  showExpandIcon: true,
  indentation: 32.0,
  expandIconColor: Colors.blue,
  highlightColor: Colors.yellowAccent,
  titleStyle: TextStyle(
    fontSize: 16,
    color: Colors.grey[800],
  ),
  searchFieldStyle: TextStyle(
    fontSize: 14,
  ),
  searchDecoration: InputDecoration(
    hintText: 'Search nodes...',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  onNodeTap: (node) {
    // Handle node tap
  },
  onExpandToggle: (node, isExpanded) {
    // Handle expand/collapse
  },
)

Without Search Field

SearchableSilverTree(
  nodes: nodes,
  showSearchField: false, // Hide search bar
  onNodeTap: (node) {
    print('Tapped: ${node.title}');
  },
)

Parameters

Parameter	Type	Default	Description
`nodes`	`List<TreeNode>`	required	List of tree nodes to display
`titleStyle`	`TextStyle?`	null	Custom style for node titles
`searchFieldStyle`	`TextStyle?`	null	Custom style for search input text
`searchDecoration`	`InputDecoration?`	null	Custom decoration for search field
`expandIconColor`	`Color?`	null	Color for expand/collapse icons
`indentation`	`double?`	24.0	Indentation width for each tree level
`showExpandIcon`	`bool`	true	Whether to show expand/collapse icons
`showSearchField`	`bool`	true	Whether to show the search input field
`highlightSearchMatches`	`bool`	true	Whether to highlight search matches
`highlightColor`	`Color?`	Colors.yellow	Color for search match highlights
`onNodeTap`	`void Function(TreeNode node)?`	null	Callback when a node is tapped
`onExpandToggle`	`void Function(TreeNode node, bool isExpanded)?`	null	Callback when node expand state changes

TreeNode Class

TreeNode({
  required this.title,
  this.children = const [],
  this.data, // Custom data you can attach to the node
  this.isExpanded = false,
});

Additional information

GitHub: https://github.com/lyj-514328/searchable_tree
License: BSD 3-Clause
Changelog: See CHANGELOG.md for version history
Issues: Please file issues on the GitHub repository
Contributions: Pull requests are welcome!
Example: Check the /example folder for a complete working example

Platform Support

✅ Android
✅ iOS
✅ Web
✅ Windows
✅ macOS
✅ Linux