buildWidget method

  1. @override
Widget buildWidget(
  1. BuildContext context
)
override

Builds the visual representation of the annotation.

This method is called by the framework to render the annotation's content. Implement this to define how your custom annotation appears on the canvas.

The framework automatically wraps your widget with:

  • Positioning logic (using visualPosition)
  • Selection visual feedback
  • Theme-consistent borders and highlights

Example

@override
Widget buildWidget(BuildContext context) {
  return Container(
    width: size.width,
    height: size.height,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Center(child: Text('My Annotation')),
  );
}

Implementation

@override
Widget buildWidget(BuildContext context) {
  // Get node theme for consistent border radius
  final nodeTheme = Theme.of(context).extension<NodeFlowTheme>()!.nodeTheme;
  final borderRadius = nodeTheme.borderRadius;
  final borderWidth = nodeTheme.borderWidth;

  return Observer(
    builder: (_) {
      // Observe the reactive properties
      final title = currentTitle;
      final color = currentColor;
      final radius = Radius.circular(borderRadius.topLeft.x - borderWidth);

      return Container(
        width: size.width,
        height: size.height,
        color: color.withValues(alpha: 0.1),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
              decoration: BoxDecoration(
                color: color.withValues(alpha: 0.8),
                borderRadius: BorderRadius.only(
                  topLeft: radius,
                  topRight: radius,
                ),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
              child: Text(
                title.isNotEmpty ? title : 'Group',
                style: Theme.of(context).textTheme.labelSmall?.copyWith(
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Expanded(child: Container()), // Empty space for nodes
          ],
        ),
      );
    },
  );
}