searchable_tree 0.0.2
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.
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),
),
),
);
}
}