thangmam / dynamic_treeview

A Dynamic treeview that can be build using dynamic parent/child relationship

dynamic_treeview - A flutter package

A Dynamic treeview that can be build using dynamic parent/child relationship. It supports indefinite category/subcategory lists with horizontal and vertical scrolling

Getting Started

In your flutter project add the dependency:

    dependencies:
        ...
        dynamic_treeview: 1.0.0+2

Import package

import 'package:dynamic_treeview/dynamic_treeview.dart';

BaseModel implementation

    Since DynamicTreeView is build using data having parent/child relationship, 
    you must create a class model that implements BaseModel and overrides the method 
    like getParentId(), getId() and getTitle() and return appropriate values to make it work. 
    The method getExtraData() has also been added just in-case if any extra data is needed when child/parent is tapped.

Sample Usage

    DynamicTreeView(
        data: getData(), // pass here List<BaseModel>
        config: Config(
            parentTextStyle:
                TextStyle(color: Colors.black, fontWeight: FontWeight.w600),
            rootId: "1",
            parentPaddingEdgeInsets:
                EdgeInsets.only(left: 16, top: 0, bottom: 0)),
        onTap: (m) {
        //action on tap
        },
        width: MediaQuery.of(context).size.width,
    )

Constructor parameters

    data                -   List<BaseData> .TreeView will be build based on this data.This is a required field
    config              -   Various Configuration options
    onTap               -   Callback when tapped on parent/child widget

Configuration parameters

    parentTextStyle                 -   Parent tile TextStyle
    parentPaddingEdgeInsets         -   Parent tile padding
    childrenTextStyle               -   Child tile TextStyle
    childrenPaddingEdgeInsets       -   Children tile padding

Check the Config class in dynamic_treeview.dart file for details.

Sample code

Please check example for details.

Screenshots

Full Screen

Drawer

MIT LICENSE

I spent weeks of my time developing this package. I really hope this saves you loads of time and i'd be glad to hear your feedback.Let me know if you find any bugs/issues.Thanks.

dynamic_treeview's Issues

Null safety support

I can't run dynamic_treeview on my system because this library does not support null safety yet.
I hope next release will be supported

[✓] Flutter (Channel beta, 2.6.0-5.2.pre, on macOS 11.6 20G165 darwin-x64, locale en-TH)
    • Flutter version 2.6.0-5.2.pre at /Users/sarit/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 400608f101 (6 weeks ago), 2021-09-15 15:50:26 -0700
    • Engine revision 1d521d89d8
    • Dart version 2.15.0 (build 2.15.0-82.2.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/sarit/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /Users/sarit/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7784292/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/sarit/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7784292/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/sarit/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7678000/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.56.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (2 available)
    • iPhone 13 (mobile) • EA48D2D1-93D8-4DF5-A3D3-B317D5988B83 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 95.0.4638.54

• No issues found!

OnChildrenTap is not implemented

OnChildrenTap is not implemented in version dynamic_treeview: 1.0.0+2 the example shows that it is there, but the version on PUb doesn't contain that update...

Tree View disordered if id greater than 10

Tree View disordered if id greater than 10.
I sugest you change like this:
_buildTreeView() {
var k = widget.data
.where((data) {
return data.getParentId() == widget.config.rootId;
})
.map((data) {
return data.getId();
})
.toSet()
.toList()
..sort((i, j) => int.parse(i).compareTo(int.parse(j)));

var widgets = List<ParentWidget>();
k.forEach((f) {
  ParentWidget p = buildWidget(f, null);
  if (p != null) widgets.add(p);
});
setState(() {
  treeView = widgets;
});

}

defaultExpandedAll

Hi, nice to see this excellent library! and can all be expanded by default? thanks a lot.

No update on StreamBuilder

Hi, I really like this treeview but when data is from a stream source it builds ok at the begining but no updates when datastream changes. Any idea on how to implement it?
Sorry if it is a newbie question...

By the way, I'm trying to use it on a list of Expenses and Incomes categories and subcategories I retrieve from Firestore database. It shows the list perfect and beautiful at the begining. But when I add a new category the tree does not rebuild as the former listView does.

Optimize rendering of large amounts of data

dynamic_treeview/lib/dynamic_treeview.dart

Line 332 in 4cc73d0

children: widget.children,

children: widget.children ==> children: shouldExpand ? widget.children : []

Item in root, without children, not worked

I want to add an element to the root, but it is perceived as a parent. Although it has no children.

horizontal scrolling is not working

when my tree became so large that the most nested node size overflows the width of the screen
and gives this error

Trailing widget consumes entire tile width. Please use a sized widget.
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1357 pos 7: 'tileWidth != trailingSize.width'

How to close the tree once an element is tapped? Also the bottom is getting overflowed at the bottom, when I am using it inside a column.

Below is the code I am using:
Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ListTile(...),
            DynamicTreeView(
              data: data,
              config: Config(
    
               parentTextStyle:  kTextGreyNormal.copyWith(color: kColorPrimaryBlue),
               rootId: "1",
               childrenPaddingEdgeInsets: EdgeInsets.symmetric(vertical: 5.0,horizontal: 5.0),
               parentPaddingEdgeInsets:  EdgeInsets.only(left: 10, top: 0, bottom: 0)),
               onTap: (key) {
                //TODO: Close the tree view to its original
                 Provider.of<ProductListViewModel>(context).getProductListFromCategoryId(key['id']);
               },
             ),
           ]
)

can you show as example with checkbox

Dynamic data

Hi,
I have the data coming from a webservice.
If my array is declared statically it works, but if I fill it in initState and call setState() it doesnt fill.
I've checked and the array content is the same in both ways.
You know why?
Thank you for you effort.
Cheers