flutter_treeview 0.1.0+2

flutter_treeview #

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 = [
   label: 'Documents',
   key: 'docs',
   expanded: true,
   icon: NodeIcon(
         docsOpen ? Icons.folder_open.codePoint : Icons.folder.codePoint,
     color: "blue",
   children: [
         label: 'Job Search',
         key: 'd3',
         icon: NodeIcon.fromIconData(Icons.input),
         children: [
               label: 'Resume.docx',
               key: 'pd1',
               icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
               label: 'Cover Letter.docx',
               key: 'pd2',
               icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
       label: 'Inspection.docx',
       key: 'd1',
         label: 'Invoice.docx',
         key: 'd2',
         icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
     label: 'MeetingReport.xls',
     key: 'mrxls',
     icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
     label: 'MeetingReport.pdf',
     key: 'mrpdf',
     icon: NodeIcon.fromIconData(Icons.insert_drive_file)),
     label: 'Demo.zip',
     key: 'demo',
     icon: NodeIcon.fromIconData(Icons.archive)),
TreeViewController _treeViewController = TreeViewController(children: nodes);
  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(),

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.


Updated #

  • Updated links to repository documentation
  • Cleaned up warnings


Updated #

  • Added logic to update TreeNode when expanded programmatically
  • Fixed issue with adding new node to a TreeNode with new children


Added #

  • Added api documentation

Updated #

  • Added parentLabelStyle to TreeViewTheme to support separate styling for parent node


Added #

  • Added ExpanderModifier

Updated #

  • Updated open source license
  • Simplified ExpanderType
  • Refactored TreeNodeExpander class and added animation to icon
  • Updated default expander size

Removed #

  • Removed custom TreeView font


  • Initial package release


Example #

Example Project #

View example code in the TreeView Test Example

Example Code #

There are also some examples in the unit tests.

Screenshots #



Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flutter_treeview: ^0.1.0+2

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flutter_treeview/generated/i18n.dart';
import 'package:flutter_treeview/tree_view.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 19, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Maintenance suggestions

The description is too long. (-4 points)

Search engines display only the first part of the description. Try to keep the value of the description field in your package's pubspec.yaml file between 60 and 180 characters.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies