A treeview for Flutter. Based on the listview.

Overview

ListTreeView

A treeview for Flutter. Based on the listview

  • Highly customizable. It only manages the tree structure of the data, and the UI is designed by yourself.
  • Performance is efficient because of the Listview's reuse mechanism.
  • Infinitely increasing child levels and child nodes

Flutter 2.0 support

  • flutter 2.0 null safety support in version 0.3.0

avatar avatar

Getting Started

Installation

1. Depend on it
dependencies:
  list_treeview: [version]
2. Install it
$ flutter pub get
3. Import it
import 'package:list_treeview/list_treeview.dart';

Usage

1、initialize controller.

The controller must be initialized when the treeView create

class _TreePageState extends State<TreePage> {
  TreeViewController _controller;
  @override
  void initState() {
    super.initState();
    ///The controller must be initialized when the treeView create
    _controller = TreeViewController();
  }
}

2、Set the data for each row.

  • Your data class must inherit from Nodedata, and you can customize other properties of the class.
/// The data class that is bound to the child node
/// You must inherit from NodeData !!!
/// You can customize any of your properties
class TreeNodeData extends NodeData {
  TreeNodeData({this.label,this.color}) : super();

  /// Other properties that you want to define
  final String label;
  final Color color;
  String property1;
  String property2;
  String property3;
  ///...
}
  • Set the TreeView's data, use '_controller.treeData()'
void getData() async {
    print('start get data');
    _isSuccess = false;
    await Future.delayed(Duration(seconds: 2));

    var colors1 = TreeNodeData(label: 'Colors1');
    var color11 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 0, 139, 69));
    var color12 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 0, 191, 255));
    var color13 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 255, 106, 106));
    var color14 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 160, 32, 240));
    colors1.addChild(color11);
    colors1.addChild(color12);
    colors1.addChild(color13);
    colors1.addChild(color14);

    var colors2 = TreeNodeData(label: 'Colors2');
    var color21 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 255, 64, 64));
    var color22 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 28, 134, 238));
    var color23 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 255, 106, 106));
    var color24 = TreeNodeData(
        label: 'rgb(0,139,69)', color: Color.fromARGB(255, 205, 198, 115));
    colors2.addChild(color21);
    colors2.addChild(color22);
    colors2.addChild(color23);
    colors2.addChild(color24);

    /// set data
    _controller.treeData([colors1, colors2]);
    print('set treeData suceess');

    setState(() {
      _isSuccess = true;
    });

  }

Insert

_controller.insertAtFront(dataNode,newNode);
//_controller.insertAtRear(dataNode, newNode);
//_controller.insertAtIndex(1, dataNode, newNode);

Remove

_controller.removeItem(item);

Expand or collapse children

/// Control item to expand or collapse
/// [index] The index of the selected item
_controller.expandOrCollapse(index);

Selected

/// select only itself
_controller.selectItem(item);

/// Select itself and all child nodes
_controller.selectAllChild(item);
Comments
  • [Feature Req] Search Box / Filter Support?

    [Feature Req] Search Box / Filter Support?

    Hi,

    I am wondering if there was ever an attempt to add search functionality or a filter bar to the list view. I think that would be a great addition to this package.

    opened by vallamost 1
  • Bug: check if mounted before calling setState()

    Bug: check if mounted before calling setState()

    Please consider checking if mounted before calling setState() in tree_view.dart https://github.com/sooxie/list_treeview/blob/c10335ca5645272618a9d4506a1ced9d47778f96/lib/tree/tree_view.dart#L78

    From:

     void updateView() {
        setState(() => {});
      }
    

    to

     void updateView() {
        if (mounted) {
          setState(() => {});
        }
      }
    

    I/flutter ( 2032): The TreeViewController sending notification was: I/flutter ( 2032): Instance of 'TreeViewController' I/flutter ( 2032): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter ( 2032): ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════ I/flutter ( 2032): The following assertion was thrown while dispatching notifications for TreeViewController: I/flutter ( 2032): setState() called after dispose(): _ListTreeViewState#b42b1(lifecycle state: defunct, not mounted) I/flutter ( 2032): This error happens if you call setState() on a State object for a widget that no longer appears in I/flutter ( 2032): the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error I/flutter ( 2032): can occur when code calls setState() from a timer or an animation callback. I/flutter ( 2032): The preferred solution is to cancel the timer or stop listening to the animation in the dispose() I/flutter ( 2032): callback. Another solution is to check the "mounted" property of this object before calling I/flutter ( 2032): setState() to ensure the object is still in the tree. I/flutter ( 2032): This error might indicate a memory leak if setState() is being called because another object is I/flutter ( 2032): retaining a reference to this State object after it has been removed from the tree. To avoid memory I/flutter ( 2032): leaks, consider breaking the reference to this object during dispose().

    opened by MagnusJohansson 1
  • Expose notifyListeners in TreeViewController

    Expose notifyListeners in TreeViewController

    Hi,

    thanks for writing the plugin, it works quite well.

    We came across the situation in which we need to udpate NodeData we have extended while using the same TreeViewController to keep nodes expanded / collapsed after the update.

    I considered writing methods to update the node and implemented them in this fork https://github.com/archie-sh/list_treeview but its nicer to apply the logic on the custom objects on our app side and just notifying the tree that there has been a change.

    I would suggest expsoing notifiyListeneres in a rebuild method. e.g.

    void rebuild() { notifyListeners(); }

    Regards.

    opened by archie-sh 1
  • Expose ShrinkWrapp property from ListView.Builder

    Expose ShrinkWrapp property from ListView.Builder

    Hey good job on building this package I have a use case where i need to set shrinkWrap property of ListView.the only thing i can do is to copy the file to my project and edit but it would be awesome to allow users to do so easly.

    Kind regards!

    opened by akdu12 1
  • Added a way to disable implicit node toggling

    Added a way to disable implicit node toggling

    I have added the toggleNodeOnTap property to the ListTreeView class to make it possible to toggle the node from a button press instead of clicking the node itself. I need this feature because in my application, clicking a node will trigger the Navigator to switch pages. To expand or collapse nodes I'm using an IconButton that calls TreeViewController.expandOrCollapse from the node widget (ListTile in my case).

    opened by mbaumgartenbr 1
  • Null check operator used on a null value

    Null check operator used on a null value

    when I dispose the controller & reset it with data. after that, I m using the parentOfItem() method to get parent data but it returns a Null check operator used on a null value.

    opened by dipen-apptrait 0
  • Is it possible to insert root item?

    Is it possible to insert root item?

    The read me mentions these method in controller to insert nodes but they all seems need a parent. Is it possible to insert items at root level?

    _controller.insertAtFront(dataNode, newNode);
    //_controller.insertAtRear(dataNode, newNode);
    //_controller.insertAtIndex(1, dataNode, newNode);
    
    opened by anthonychwong 0
  • Content of Node is not refreshing

    Content of Node is not refreshing

    Hey,

    we use BloC to handle our state of the View. After a navigation event and returning to the view that contains the ListTreeView i reload the Data that is displayed by the ListTreeView.

    If i set the treeData() a second time, the itemBuilder of the ListTreeView uses the old data of the initial TreeData() call.

    How can i force the ListTreeView to reload the Data so changes are displayed? In my example i have an item with an int value that is display in the ListTreeView. Inside the itemBuilder i do something like this:

    treeViewController.treeData(lChecklistNodeData);
    return ListTreeView(
          controller: treeViewController,
          itemBuilder: (BuildContext context, NodeData data) {
            ChecklistNodeData item = data as ChecklistNodeData;
    
    return Text('${item.intValue}');
    });
    
    

    As i said this is working fine the first time, but when i reload the data and the build() method is retriggered the Data in the itemBuilder function is not refreshed. I checked the data i pass to treeData() and it is definitly the new data. But still the itemBuilder uses the data of the first set of treeData().

    I managed to refresh the Parent items by resetting the TreeViewController treeViewController = new TreeViewController();

    but this leads to only the parents showing up. All child elements are missing after the second rebuild if i do this.

    Thanks in advance

    opened by ynnob 10
  • Horizontal scrolling of the treeview

    Horizontal scrolling of the treeview

    Hi,

    I'm this widget and so far, it works flawlessly. But I see that, as the number levels in the tree go higher - eventually I see the overflow error on the right of the tree.

    How can the tree view auto scroll to the right as the depth of the tree increases. Can you please point to an example for the same?

    opened by kondrara 1
Owner
sooxie
A good man
sooxie
🧾 Flutter widget allowing easy cache-based data display in a ListView featuring pull-to-refresh and error banners.

Often, apps just display data fetched from some server. This package introduces the concept of fetchable streams. They are just like normal Streams, b

Marcel Garus 17 Jan 18, 2022
Flutter tableview - A flutter widget like iOS UITableview. let listView with section header and each section header will hover at the top.

中文 flutter_tableview A flutter widget like iOS UITableview. let listView with section header and each section header will hover at the top. Installing

null 41 Jul 22, 2022
Flutter Searchable ListView - Day 28

Flutter Searchable ListView - Day 28 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter Searchable Li

Mohammad Rahmani 47 Dec 17, 2022
This repository show you how implement a ListView on Flutter

Flutter Simple ListView UI Overview Android Category list Category detail iOS Category list Category detail Flutter component ListView https://docs.fl

Yen Dang 3 Nov 11, 2021
Layout of the flutter example.such as Row,Comlun,listview,Just for learning.

Just for learning ❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flut

Flutter开源社区 308 Nov 29, 2022
This is a repo for Flutter ItemStack ListView Tutorial

Flutter Item Stack ListView Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

Paras Jain 152 Dec 19, 2022
Flutter item stack listview

Flutter Item Stack ListView Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

sarad chhetri 0 Dec 12, 2021
Flutter Scrollable Widgets like ListView,GridView or powerful CustomScrollView can't nest inner scrollview

Introduction Flutter Scrollable Widgets like ListView,GridView or powerful CustomScrollView can't nest inner scrollview. If Nested, inner scrollview w

jaysonss 5 Aug 28, 2022
A Listview app for flutter

Listview-app NOTE : Add code pubspec.yaml assets: - assets/images/

MD. ABU SAYED 0 Oct 6, 2021
A Flutter ListView in which items can be grouped into sections.

Grouped list package for Flutter. Now with beta support for null safety! A flutter ListView in which list items can be grouped to sections. Features S

Dimitrios Begnis 277 Dec 26, 2022
Layout of the flutter example.such as Row,Comlun,listview,Just for learning.

Just for learning ❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flut

Flutter开源社区 308 Nov 29, 2022
Multi type list view - A flutter customer ListView that displays multiple widget types.

MultiTypeListView A light weight flutter customer ListView that displays multiple widget types. Screenshot home chat Getting Started dependencies: m

齐翊(学义) 52 Jun 28, 2022
A flutter demo app to practice ListView and Cards

A flutter demo app to practice ListView and Cards

Alexander Sosa 0 Jan 3, 2022
A flutter demo app to practice ListView.separated

ListView 2 A flutter demo app to practice ListView.separated Developer Alexander Sosa

Alexander Sosa 0 Jan 3, 2022
A small library support load infinite for ListView - GridView on Flutter.

Paging A Flutter package that supports pagination(load infinite) for ListView, GridView Demo DataSource PageKeyedDataSource To create a PagingListView

Đặng Ngọc Đức 32 Dec 4, 2022
An extension of the Flutter ListView widget for incrementally loading items upon scrolling

incrementally_loading_listview An extension of the Flutter ListView widget for incrementally loading items upon scrolling. This could be used to load

Michael Bui 174 Sep 27, 2022
Flutter Tutorial - Scroll To Top In ListView

Flutter Tutorial - Scroll To Top In ListView Let's use Flutter to scroll to the top of a ListView and to detect the current ListView Scroll Position.

null 0 Apr 20, 2022
This is an applications for fetching pokemon data from API and showed in Listview with infinity scrolling

pokedex This is an applications for fetching pokemon data from API and showed in Listview with infinity scrolling #Author Created by Yusril Rapsanjani

Yusril Rapsanjani 9 Dec 13, 2019
🔥 Simple application using ListView with YummiAPI for list Food 🍲

demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is

Geovani Amaral 2 Jan 5, 2022