How can I manually use a controller to update a node’s data?

[onism0106]

My project uses BLoC, not MobX.

When building a custom node (for example, an ApiRequest node), there is a dropdown menu inside the node. After selecting an item from the dropdown, I want to update the data of that node.

Widget _buildNode(Node<LogicNode> node) {
  switch (node.data) {
    case ApiRequest():
      return BlocBuilder<LogicFlowBloc, LogicFlowState>(
        builder: (context, state) {
          return FDropdown(
            dataItems: state.apiList,
            itemBuilder: (v) {
              return Text(v.apiName);
            },
            onChanged: (v) {
              // I want to update the node's data here
            },
          );
        },
      );
    default:
      return Center(
        child: Text((node.data).displayName),
      );
  }
}

[pavanpodila]

The data inside your node is entirely in your control, so you could use the reactivity from bloc and then update your node widget whenever the data changes. The controller is used for manipulating the nodes themselves, not the data inside the node. This gives you complete flexibility, according to what makes sense for your own application

[onism0106]

So if I move the following fields into my Bloc state:

final List<Node<T>> nodes;
final List<Connection<C>> connections;
final GraphViewport viewport;
final Map<String, dynamic> metadata;

and then call controller.loadGraph() every time the state changes, I’m not sure whether this follows best practices or whether it could introduce performance issues.

[pavanpodila]

You don't have to call loadgraph every single time. Just change your properties and make sure your node widget is listening to those properties reactively.