Sockets Customization

Sockets (also known as ports) are points on a node where connections can attach. You can customize the appearance of the node's sockets in your diagram.

Custom Sockets

You can fully customize the appearance and positioning of sockets using the socketBuilder property on LukeFlowCanvas.

 
LukeFlowCanvas(
  controller: controller,
  socketBuilder: (node, socket) { 
    return Container( 
      // Don't forget to use the key for the socket
      key: controller.getOrCreateSocketKey(socket.id), 
      decoration: BoxDecoration( 
        color: Colors.blue, 
        shape: BoxShape.circle, 
      ), 
      child: Center( 
        child: Text( 
          socket.type == NodeSocketType.input ? 'IN' : 'OUT', 
          style: TextStyle( 
            color: Colors.white, 
            fontWeight: FontWeight.bold, 
          ), 
        ), 
      ), 
    ); 
  }, 
);

Example Usage

See the example below to understand how to customize sockets in your diagram.

As you can see in the example above, you can use any widget as a socket, allowing for complete customization of the socket's appearance.