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
• 🎯 Node Selection: Selectable nodes with visual feedback and auto-scroll
• ➕ Add Button: Built-in add button for creating new nodes
• 🍱 Context Menu: Support for node context menus with custom positioning
• 🎯 Initial Selection: Set initial selected node on widget load

Demo #

Getting started #

Add the package to your pubspec.yaml:

dependencies:
  searchable_tree: ^0.0.2

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(
    id: '1',
    title: 'Parent Node 1',
    children: [
      TreeNode(id: '1-1', title: 'Child Node 1-1'),
      TreeNode(
        id: '1-2',
        title: 'Parent Node 1-2',
        children: [
          TreeNode(id: '1-2-1', title: 'Child Node 1-2-1'),
          TreeNode(id: '1-2-2', title: 'Child Node 1-2-2'),
        ],
      ),
    ],
  ),
  TreeNode(id: '2', title: 'Parent Node 2'),
];

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

Customized Example #

SearchableTree(
  nodes: nodes,
  showSearchField: true,
  showExpandIcon: true,
  indentation: 32.0,
  expandIconColor: Colors.blue,
  highlightColor: Colors.yellowAccent,
  selectedColor: Colors.blue.withValues(alpha: 0.2),
  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
  },
  onNodeSelected: (node, isSelected) {
    // Handle node selection
  },
  onAddButtonTap: () {
    // Handle add button tap
  },
  onNodeShowMenu: (node, position) {
    // Show context menu at position
  },
)

Without Search Field #

SearchableTree(
  nodes: nodes,
  showSearchField: false,
  onNodeTap: (node) {
    print('Tapped: ${node.title}');
  },
)

With Initial Selection #

SearchableTree(
  nodes: nodes,
  initialSelectedNodeId: '1-2',
  onNodeSelected: (node, isSelected) {
    print('Selected: ${node.title}');
  },
)

Parameters #

TreeNode Class #

TreeNode({
  required this.id,        // Unique identifier for the node
  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