fluttertreeview

How to collapse all nodes on SliverTreeView when tree data loaded in Flutter Animated Tree View Module


I am using animated_tree_view SliverTreeView widget to make a tree view. This widget expands all of the nodes when it finished loading. This is my current code.

SliverTreeView.simple(
    tree: simpleTree,
    expansionBehavior: ExpansionBehavior.collapseOthers,
    showRootNode: false,
    key: _simpleTreeKey,
    onTreeReady: (controller) {
      controller.collapseNode(simpleTree);
    },
    scrollController: scrollController,
    builder: (context, node) => Card(
        child:
            node.isRoot ? buildRootItem(node) : buildListItem(node)),
  ),

To make it myself, I tried to use onTreeReady method called when it loaded. But it is not working now. If you have experience in SliverTreeView, please help me.


Solution

  • I solved this issue myself by making the treeview with FutureBuilder.

    The result

    final Future<TreeNode> futureTree = Future<TreeNode>.delayed(
        const Duration(milliseconds: 1000),
        () => ActivityModel().getTree(),
      );
    
    FutureBuilder<TreeNode>(
                future: futureTree,
                builder: (BuildContext context, AsyncSnapshot<TreeNode> snapshot) {
                  if (snapshot.hasData) {
                    return CustomScrollView(
                      controller: scrollController,
                      slivers: [
                        SliverToBoxAdapter(
                          child: Padding(
                              padding: const EdgeInsets.only(
                                  top: 12.0, left: 12, right: 30, bottom: 12),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: SizedBox(
                                  width: 200,
                                  height: 40,
                                  child: ElevatedButton(
                                    child: const Text("Add main activity"),
                                    style: ElevatedButton.styleFrom(
                                        backgroundColor:
                                            Theme.of(context).primaryColor,
                                        textStyle:
                                            const TextStyle(color: Colors.white),
                                        shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(5))),
                                    onPressed: () {
                                      // simpleTree.add(TreeNode());
                                      Navigator.of(context)
                                          .push(MaterialPageRoute(
                                              builder: (context) =>
                                                  const ActivityAdd(
                                                      title: 'Add Activity',
                                                      selfId: 'root')))
                                          .then((val) => {
                                                val == 'success'
                                                    ? _getRequests()
                                                    : null
                                              });
                                    },
                                  ),
                                ),
                              )),
                        ),
                        SliverTreeView.simple(
                            tree: simpleTree,
                            expansionBehavior: ExpansionBehavior.collapseOthers,
                            showRootNode: false,
                            key: _simpleTreeKey,
                            onItemTap: (value) => {},
                            scrollController: scrollController,
                            onTreeReady: (controller) => {debugPrint("Loaded")},
                            builder: (context, node) {
                              return node.isRoot
                                  ? buildRootItem(node)
                                  : buildListItem(node);
                            }),
                      ],
                    );
                  } else if (snapshot.hasError) {
                    return Text('Error: ${snapshot.error}');
                  } else {
                    return Center(
                      child: SizedBox(
                        width: 60,
                        height: 60,
                        child: CircularProgressIndicator(),
                      ),
                    );
                  }
                })