Customizing Node Appearance

Nodes can have different shape, background image or color. They can also have differently aligned text.

Customizing the shape of nodes

ShapeNode provides a shape property that specifies the geometric shape of the node. The property can be set to a stock Shape instance as in example below, or to a custom shape definition:

startNode.shape = Shape.fromId(id: "Actor")

TableNode and ContainerNode provide shape property too, but their shapes can only be set to either rectangle or rounded rectangle.

Bitmap images

Each node can display an image as its content. The image is set via the image property. Be default it is centered inside the node. You can change the alignment by setting imageAlign.

Fill color

Nodes can be painted in any color that you choose. Use brush to specify how the node is painted.

startNode.brush = SolidColorBrush(color: Colors.Red)

Linear gradients

Nodes can be filled using linear gradients by assigning LinearGradientBrush objects to the brush property. If the gradient should blend only two colors, they can be specified using color1 and color2 fields instead of colorStops.

let linearBrush = LinearGradientBrush()
linearBrush.angle = 90
linearBrush.colors = [Colors.White, Colors.Green, Colors.Red]
linearBrush.positions = [0.27, 0.4, 0.83]

endNode.brush = linearBrush

Text and font

Nodes can have text with customizable font and text alignment. Use text to specify the text for the node; textColor changes the color of the text and verticalTextAlignment and horizontalTextAlignment - its alignment. The fontName and fontSize properties let you specify a distinct font and its size for each node:

startNode.fontSize = 20
startNode.fontName = "Didot"