No description
Find a file
2025-03-22 09:44:28 -07:00
example Initial commit 2021-07-07 10:14:27 +01:00
lib Attempt to fix hover color to a more reasonable color for a dark theme 2025-02-05 02:54:59 -07:00
res/values Initial commit 2021-07-07 10:14:27 +01:00
screenshots Initial commit 2021-07-07 10:14:27 +01:00
test Remove unnecessary references to colours 2022-03-02 22:36:41 +00:00
.gitignore Initial commit 2021-07-07 10:14:27 +01:00
.metadata Initial commit 2021-07-07 10:14:27 +01:00
builddocs.sh Initial commit 2021-07-07 10:14:27 +01:00
CHANGELOG.md Initial commit 2021-07-07 10:14:27 +01:00
Jenkinsfile Add dart doc workaround 2025-03-22 09:44:28 -07:00
LICENSE Initial commit 2021-07-07 10:14:27 +01:00
pubspec.lock support for flutter 3.27 and removed deprecation warnings 2025-01-14 15:54:29 +01:00
pubspec.yaml Update flutter treeview publish path 2025-03-09 23:04:40 -07:00
README.md Migrate package to git.zontreck.com 2025-01-22 12:00:13 -07:00

flutter_treeview

NOTE: This is a fork of the original project in order to maintain functionality across updates for this abandoned package.

A hierarchical data widget for your flutter apps.

It offers a number of options for customizing the appearance and handling user interaction.

It also offers some convenience methods for importing data into the tree.

Features

  • Separately customize child and parent labels
  • Add any icon to a node
  • Choose from four different expander icons and several modifiers for adjusting shape, outline, and fill.
  • Import data from a Map
  • Includes ability to handle expandChange, tap, and double tap user interactions
  • Includes convenience methods for adding, updating and deleting nodes

Sample Code

Creating a TreeView

List<Node> nodes = [
 Node(
   label: 'Documents',
   key: 'docs',
   expanded: true,
   icon: docsOpen ? Icons.folder_open : Icons.folder,
   children: [
     Node(
         label: 'Job Search',
         key: 'd3',
         icon: Icons.input,
         children: [
           Node(
               label: 'Resume.docx',
               key: 'pd1',
               icon: Icons.insert_drive_file,
           ),
           Node(
               label: 'Cover Letter.docx',
               key: 'pd2',
               icon: Icons.insert_drive_file),
         ]),
     Node(
       label: 'Inspection.docx',
       key: 'd1',
     ),
     Node(
         label: 'Invoice.docx',
         key: 'd2',
         icon: Icons.insert_drive_file),
   ],
 ),
 Node(
     label: 'MeetingReport.xls',
     key: 'mrxls',
     icon: Icons.insert_drive_file),
 Node(
     label: 'MeetingReport.pdf',
     key: 'mrpdf',
     icon: Icons.insert_drive_file),
 Node(
     label: 'Demo.zip',
     key: 'demo',
     icon: Icons.archive),
];
TreeViewController _treeViewController = TreeViewController(children: nodes);
TreeView(
  controller: _treeViewController,
  allowParentSelect: false,
  supportParentDoubleTap: false,
  onExpansionChanged: _expandNodeHandler,
  onNodeTap: (key) {
    setState(() {
      _treeViewController = _treeViewController.copyWith(selectedKey: key);
    });
  },
  theme: treeViewTheme
),

_The TreeView requires that the onExpansionChange property updates the expanded node so that the tree is rendered properly.

Creating a theme

TreeViewTheme _treeViewTheme = TreeViewTheme(
  expanderTheme: ExpanderThemeData(
    type: ExpanderType.caret,
    modifier: ExpanderModifier.none,
    position: ExpanderPosition.start,
    color: Colors.red.shade800,
    size: 20,
  ),
  labelStyle: TextStyle(
    fontSize: 16,
    letterSpacing: 0.3,
  ),
  parentLabelStyle: TextStyle(
    fontSize: 16,
    letterSpacing: 0.1,
    fontWeight: FontWeight.w800,
    color: Colors.red.shade600,
  ),
  iconTheme: IconThemeData(
    size: 18,
    color: Colors.grey.shade800,
  ),
  colorScheme: ColorScheme.light(),
)

Using custom data

The Node class supports the use of custom data. You can use the data property on the Node instance to store data that you want to easily retrieve.

class Person {
  final String name;
  final List<Animal> pets;

  Person({this.name, this.pets});
}

class Animal {
  final String name;

  Animal({this.name});
}

Animal otis = Animal(name: 'Otis');
Animal zorro = Animal(name: 'Zorro');
Person lukas = Person(name: 'Lukas', pets: [otis, zorro]);

List<Node> nodes = [
  Node<Person>(
    label: 'Lukas',
    key: 'lukas',
    data: lukas,
    children: [
      Node<Animal>(
        label: 'Otis',
        key: 'otis',
        data: otis,
      ),
      //<T> is optional but recommended. If not specified, code can return Node<dynamic> instead of Node<Animal>
      Node(
        label: 'Zorro',
        key: 'zorro',
        data: zorro,
      ),
    ]
  ),
];
TreeViewController _treeViewController = TreeViewController(children: nodes);
TreeView(
  controller: _treeViewController,
  onNodeTap: (key) {
    Node selectedNode = _treeViewController.getNode(key);
    Person selectedModel = selectedNode.data;
  },
),

Getting Started

For help getting started with this widget, view our online documentation or view the full API reference.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.