Problema para atualizar os itens (nós) do itemBuider do widget ListTreeView().

[lucasgm1997]

Salve galera, tudo jóia?
Minha dúvida é o seguinte, estou usando ListTreeView( ), que tem seu TreeViewController.
Quando eu altero um dado do nó da minha arvore eu atualizo o atributo data, através da função treeViewcontroller.treeData(_treeNodesData);

class RouteDetailNodesTreeController = _RouteDetailNodesTreeControllerBase
    with _$RouteDetailNodesTreeController;

abstract class _RouteDetailNodesTreeControllerBase with Store {
  RouteStore routeStore = GetIt.I<RouteStore>();

  @observable
  TreeViewController treeViewcontroller = TreeViewController();

  @observable
  ObservableList<TreeNodeData> _treeNodesData = <TreeNodeData>[].asObservable();

  @observable
  ObservableList<Node> nodes = <Node>[].asObservable();

  _RouteDetailNodesTreeControllerBase() {
    routeStore.newNodes = null;
    loadNOdes(false);
  }

  @action
  void loadNOdes(bool isMounted) {
    log("loadNodes(), done: ${routeStore.done}");

    nodes.clear();
    nodes.addAll(routeStore.selectedRoute!.nodes!);

    _treeNodesData = TreeLoadNodeUtil.loadNodes(nodes).asObservable();
    treeViewcontroller.treeData(_treeNodesData);
    treeViewcontroller.rebuild();
  }
}

no entanto, quando debugo os nós (NodeData data) do itemBuilder, na page, não estão atualizado que nem do campo controller.treeViewcontroller, do próprio widget:

...
ListTreeView(
    shrinkWrap: true,
    controller: controller.treeViewcontroller,
    itemBuilder: (BuildContext context, NodeData data) {...}
    onTap: ...)

Alguém consegue dar uma help?

class RouteDetailNodesTree extends StatefulWidget {
  RouteDetailNodesTree({
    Key? key,
  }) : super(key: key);

  @override
  RouteDetailNodesTreeState createState() => RouteDetailNodesTreeState();
}

class RouteDetailNodesTreeState extends State<RouteDetailNodesTree> {
  RouteDetailNodesTreeController controller = RouteDetailNodesTreeController();

  @override
  void initState() {
    super.initState();

    log("route detail nodes tree has initialized");

    reaction((_) => controller.routeStore.done, (_) => effect());
  }

  void effect() {
    setState(() {
      log("effect()");

      controller.loadNOdes(mounted);
    });
  }

  @override
  void dispose() {
    controller.treeViewcontroller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (context) {
        return ListTreeView(
          shrinkWrap: true,
          controller: controller.treeViewcontroller,
          itemBuilder: (BuildContext context, NodeData data) {
            TreeNodeData item = data as TreeNodeData;

            // log(controller.routeStore.done.toString());

            var type = TypeNodeIconUtil.getNodeTypeByName(item.typeName);

            var isCompleted = TypeNodeIconUtil.verifyNodeCompleted(type, item,
                controller.routeStore.selectedRoute!, controller.routeStore);

            log("type name: ${type.name}, isCompleted: $isCompleted");

            var icon = TypeNodeIconUtil.getIconByType(item.iconType, false,
                haveReadingData: isCompleted);

            double offsetX = (item.level * 16.0) + 16;

            return Column(
              children: [
                Container(
                  height: 54,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      VerticalDivider(
                        width: 0,
                        color: Colors.grey,
                        thickness: 6,
                      ),
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(left: offsetX),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[
                              Padding(
                                  padding: EdgeInsets.only(right: 5),
                                  child: icon),
                              Text(
                                item.label!,
                                style: TextStyle(
                                  fontSize: 15,
                                ),
                              ),
                              SizedBox(
                                width: 10,
                              ),
                            ],
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(right: 18),
                        child: type == NodeTypeEnum.component
                            ? Icon(
                                Icons.play_circle_outline_outlined,
                                size: 30,
                                color: Colors.grey,
                              )
                            : item.isExpand
                                ? Icon(
                                    Icons.remove,
                                    size: 30,
                                    color: Colors.grey,
                                  )
                                : Icon(
                                    Icons.add,
                                    size: 30,
                                    color: Colors.grey,
                                  ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          },
          onTap: (NodeData data) {
            TreeNodeData item = data as TreeNodeData;
            var type = TypeNodeIconUtil.getNodeTypeByName(item.typeName);

            if (type == NodeTypeEnum.component) {
              controller.treeViewcontroller.collapseItem(
                  controller.treeViewcontroller.treeNodeOfIndex(item.index));

              NavigationTabsUtil().equipmentToOpen.add(item.nodes!);
            } else {
              controller.routeStore.setListTreeNodeSelectdTab3(data.index);
              controller.treeViewcontroller.selectItem(data);
            }
          },
        );
      },
    );
  }
}

[JoaoWitorFelipe]

Não tenho certeza, mas será que não faltou chamar o ObservableList<Node> nodes = <Node>[].asObservable(); dentro do seu Observer (Widget)? O Observer só vai reconstruir a árvore de Widgets se tiver um observable dentro dele, talvez se utilizar a propriedade itemCount do ListView e passar o nodes.length resolva.

[lucasgm1997]

Eu nomeei como "controller" em vez de store o controlador da pagina, vou renomear para store.

[JoaoWitorFelipe]

Como o seu Observer (Widget) está ao redor de um ListView não faria mais sentido seu observable ser uma lista ao invés de um controller?

[lucasgm1997]

Então, quando eu atualizo os dados do TreeViewController, é rebuildado o Widget build(){}, no entanto o parâmetro NodeData que é passado pelo ItemBuilder não esta atualizado mesmo o com o treeviewcontroller (confrimei pelo debug). É normal o itemBuilder rebuildar com dados "antigos", sendo que no mesmo momento o controller estar com os dados atualizados?

[lucasgm1997]

Você tem razão, não faz sentido ter o Observer() lá, esqueci de tirar ele de lá.

[JoaoWitorFelipe]

Então, quando eu atualizo os dados do TreeViewController, é rebuildado o Widget build(){}, no entanto o parâmetro NodeData que é passado pelo ItemBuilder não esta atualizado mesmo o com o treeviewcontroller (confrimei pelo debug). É normal o itemBuilder rebuildar com dados "antigos", sendo que no mesmo momento o controller estar com os dados atualizados?

Então, estava seguindo na ideia de que está rodando um ListView, mas por ser uma lib imagino que a ideia do @eduardoflorence faça mais sentido, de dar dispose e instânciar uma nova classe para então o Observer reagir.

[eduardoflorence]

@lucasgm1997 é importante você citar que ListTreeView é um package de terceiro e colocar o link do pub.dev para facilitar ajudá-lo.

Olhando o repositório parece que o rebuild não funciona, pois tem uma issue aberta sobre isso. A única pessoa que disse fez funcionar, matou o controller e o recriou:

_controller!.dispose();
_controller = TreeViewController();
// -- Chama a função para buscar dados atualizados

Então na sua Store não precisa colocar o treeViewcontroller como observable e no loadNOdes você teria que fazer o dispose do controller, criá-lo novamente e alimentar os nós.

[JoaoWitorFelipe]

Por ser um ListView (eu imagino que seja nesse pacote de terceiro), não seria melhor usar propriedade itemCount com o list.length, não resolveria? Obs: eu não encontrei se esse pacote aceita itemCount como parâmetro.

[lucasgm1997]

Tentei essa solucão, só que quando clicava para abrir o nó (pasta) não abria os nós filhos. perdia o onTap().

[lucasgm1997]

Não tem itemCount.

ListTreeView ListTreeView({
  required Widget Function(BuildContext, NodeData) itemBuilder,
  dynamic Function(NodeData)? onTap,
  dynamic Function(NodeData)? onLongPress,
  TreeViewController? controller,
  bool toggleNodeOnTap = true,
  bool shrinkWrap = false,
  bool removeTop = true,
  bool removeBottom = true,
  bool reverse = false,
  EdgeInsetsGeometry padding = const EdgeInsets.all(0),
})

[lucasgm1997]

Eu consegui resolver ontem a noite, toda vez que rebuilda eu pego o nó atualizado direto do controlador, já que nele quando eu rebuildo/reseto os dados da arvore ( treeViewcontroller.treeData(_treeNodesData); ) os nós estão atualizados.

class RouteDetailNodesTreeState extends State<RouteDetailNodesTree> {
  RouteDetailNodesTreeController controller = RouteDetailNodesTreeController();


  NodeData findNodeUpdatedFromTree(TreeNodeData root, int nodeId) {
    late NodeData nodeFound;

    if (root.nodes!.nodeId == nodeId) {
      nodeFound = root;
      return nodeFound;
    }

    if (root.children.isNotEmpty) {
      for (var child in root.children) {
        final nodeChild = child as TreeNodeData;

        if (nodeChild.nodes!.nodeId == nodeId) {
          nodeFound = child;
          return nodeFound;
        }
        nodeFound = findNodeUpdatedFromTree(nodeChild, nodeId);
      }
    }
    return nodeFound;
  }

  @override
  Widget build(BuildContext context) {
    return Observer(
      builder: (context) {
        return ListTreeView(
          shrinkWrap: true,
          controller: controller.treeViewcontroller,
          itemBuilder: (BuildContext context, NodeData data) {
            TreeNodeData item = data as TreeNodeData;

            final nodeDataUpdated = findNodeUpdatedFromTree(
                    controller.rootTreeNodeData, item.nodes!.nodeId!)
                as TreeNodeData;

            var type =
                TypeNodeIconUtil.getNodeTypeByName(nodeDataUpdated.typeName);

            var isCompleted = TypeNodeIconUtil.verifyNodeCompleted(
                type, nodeDataUpdated, controller.routeStore.selectedRoute!);

            var icon = TypeNodeIconUtil.getIconByType(item.iconType, false,
                haveReadingData: isCompleted);

            double offsetX = (item.level * 16.0) + 16;
             ...
          },
          onTap: (NodeData data) {
           ...
          },
        );
      },
    );
  }
}

abstract class _RouteDetailNodesTreeControllerBase with Store {
  RouteStore routeStore = GetIt.I<RouteStore>();

  @observable
  TreeViewController treeViewcontroller = TreeViewController();

  @observable
  ObservableList<TreeNodeData> _treeNodesData = <TreeNodeData>[].asObservable();

  @observable
  ObservableList<Node> nodes = <Node>[].asObservable();

  _RouteDetailNodesTreeControllerBase() {
    loadNOdes();
  }

  late TreeNodeData rootTreeNodeData;

  @action
  void loadNOdes() {

    nodes.clear();
    nodes.addAll(routeStore.selectedRoute!.nodes!);

    _treeNodesData = TreeLoadNodeUtil.loadNodes(nodes).asObservable();

    treeViewcontroller.treeData(_treeNodesData);
    treeViewcontroller.rebuild();
    rootTreeNodeData = treeViewcontroller.data!.first;
  }```