searchable_tree 0.0.2 copy "searchable_tree: ^0.0.2" to clipboard
searchable_tree: ^0.0.2 copied to clipboard

A highly customizable Flutter tree view widget with built-in search support, expand/collapse functionality, and beautiful UI.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:searchable_tree/searchable_tree.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Searchable Tree Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _showSearchField = true;

  final List<TreeNode> _sampleNodes = [
    TreeNode(
      id: '1',
      title: 'Documents',
      children: [
        TreeNode(id: '1-1', title: 'Work Report.docx'),
        TreeNode(id: '1-2', title: 'Project Plan.pdf'),
        TreeNode(
          id: '1-3',
          title:
              'This is a very long file name that should trigger text wrapping behavior when the tree view width is limited.xlsx',
        ),
        TreeNode(
          id: '1-4',
          title: 'Meeting Notes',
          children: [
            TreeNode(id: '1-4-1', title: '2023-01-01 Meeting.txt'),
            TreeNode(id: '1-4-2', title: '2023-02-15 Team Meeting.docx'),
            TreeNode(id: '1-4-3', title: '2023-03-20 Product Review.md'),
          ],
        ),
      ],
    ),
    TreeNode(
      id: '2',
      title: 'Images',
      children: [
        TreeNode(id: '2-1', title: 'Scenery.jpg'),
        TreeNode(id: '2-2', title: 'Portrait.png'),
        TreeNode(
          id: '2-3',
          title: 'Travel Photos',
          children: [
            TreeNode(id: '2-3-1', title: 'Beijing Palace.jpg'),
            TreeNode(id: '2-3-2', title: 'Shanghai Bund.png'),
            TreeNode(id: '2-3-3', title: 'Hangzhou West Lake.jpg'),
          ],
        ),
      ],
    ),
    TreeNode(
      id: '3',
      title: 'Code',
      children: [
        TreeNode(id: '3-1', title: 'main.dart'),
        TreeNode(id: '3-2', title: 'utils.dart'),
        TreeNode(
          id: '3-3',
          title: 'widgets',
          children: [
            TreeNode(id: '3-3-1', title: 'button.dart'),
            TreeNode(id: '3-3-2', title: 'card.dart'),
            TreeNode(id: '3-3-3', title: 'dialog.dart'),
          ],
        ),
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Searchable Tree Demo'),
        actions: [
          IconButton(
            icon: Icon(_showSearchField ? Icons.search_off : Icons.search),
            tooltip: _showSearchField ? 'Hide Search' : 'Show Search',
            onPressed: () {
              setState(() {
                _showSearchField = !_showSearchField;
              });
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SearchableTree(
          nodes: _sampleNodes,
          showSearchField: _showSearchField,
          onNodeTap: (node) {
            ScaffoldMessenger.of(
              context,
            ).showSnackBar(SnackBar(content: Text('Tapped: ${node.title}')));
          },
          onExpandToggle: (node, isExpanded) {
            debugPrint(
              'Node "${node.title}" is ${isExpanded ? 'expanded' : 'collapsed'}',
            );
          },
          highlightColor: Colors.yellow.withValues(alpha: 0.5),
        ),
      ),
    );
  }
}
0
likes
140
points
5
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

A highly customizable Flutter tree view widget with built-in search support, expand/collapse functionality, and beautiful UI.

Repository (GitHub)
View/report issues

Topics

#tree #treeview #search #expandable #ui

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on searchable_tree