Shape anatomy

A shape has an outline and a body. The outline supplies its fill, border and connection boundary. The body arranges text, images, widgets and smaller surfaces inside it.

Compose a shape

This approval card places an icon beside its title, with a body below. All parts move, resize and rotate as one shape.

import 'package:vyuh_diagram_flutter/extension_api.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final approval = ShapeDefinition(
  type: 'app.approval',
  name: 'Approval',
  size: const DiagramSize(240, 140),
  body: ShapePadding(12, child: ShapeColumn([
    ShapeSized(extent: 32, child: ShapeRow([
      ShapeSized(extent: 32, child: const ShapeSurface(
        outline: ShapeOutline.ellipse(),
        style: ShapeStyle(fill: DiagramColor(0xFFDBEAFE)),
      )),
      const ShapeText(
        'title',
        text: 'Approval',
        textType: PlainTextDefinition(maxLines: 1),
      ),
    ], gap: 8)),
    const ShapeText('body', text: 'Describe the decision'),
  ], gap: 8)),
);

final approvalExtension = DiagramExtension(
  id: 'app.approvals',
  shapes: [approval],
);

Install your definition once, then create it like any other shape:

void main() {
  final controller = DiagramController(
    configuration: DiagramConfiguration(extensions: [approvalExtension]),
  );
  final id = controller.createShape(
    'app.approval', at: const DiagramPoint(200, 150),
  );
  controller.setText(id, 'Approved', slot: 'title');
}

Arrange the body

Part	What it does
ShapeRow	Places parts side by side.
ShapeColumn	Places parts top to bottom.
ShapeStack	Layers parts back to front.
ShapePadding	Leaves room around a part.
ShapeSized	Gives a part a fixed size or a share of the remaining space.
ShapeText	Adds a named text slot.
ShapeSurface	Paints a smaller surface with its own style.
ShapeImage	Displays an image.
ShapeWidget	Hosts a Flutter widget with a portable fallback.

Rows and columns accept a gap. Flexible children share the remaining space; fixed-size children keep their extent. Nest rows and columns for grid-like arrangements. These are diagram parts, not Flutter layout widgets.

Choose the outline

The default is a rectangle. Use ShapeOutline.ellipse() for an ellipse, ShapeOutline.polygon(...) for straight edges, or a path for a custom contour. Fill, stroke and corner radius come from the shape's style.

Add behavior and data

Shapes support selection, movement, resizing, rotation and text editing. Configure these with shape behavior. Declare typed values for instance data and adjustments for on-canvas handles. Use connection for attachment rules and container to own child elements.

See the shape API for the full set of parts, outlines, values, ports and libraries, or widgets inside shapes for Flutter content.