Skip to content

DrawingCanvas

Mount a session inside a bounded Flutter layout. The canvas owns no second document or configuration.

dart
Expanded(child: DrawingCanvas(session: session))

Optional DrawingInspector(session: session) uses the same registry and configuration. Host applications compose toolbars and other surrounding UI. A session supports one mounted canvas at a time; unmount before session.dispose().

The canvas clips scene paint and its local overlays to the allocated viewport. Shapes, text, connector markers and selection chrome cannot paint over adjacent host widgets. This screen-space clip does not alter document geometry or export bounds; frame/shape content clipping remains a separate world-space rule.

Use DrawingConfiguration.canvasPolicy to choose InfiniteCanvasPolicy() or FiniteCanvasPolicy(worldBounds). Camera navigation never rewrites the authored shape coordinates.

Arbitrary Flutter widgets inside a node

A first-class embedded widget region is not available yet. A definition can declare visual layers, text regions, ports and interaction regions. DiagramEditorExtension.buildOverlay can return Flutter widgets positioned over the canvas using scene/camera information, and custom paint overlays can follow resolved shapes.

Those hooks are useful for application chrome and custom visuals, but they do not complete a reusable node containing sliders, dropdowns, steppers, buttons or independent Flutter text fields. Such a host needs canonical region geometry, focus and keyboard ownership, pointer arbitration with dragging, ancestor clipping, zoom/rotation transforms, lifecycle and visibility policies, and a transaction contract for widget values. Those contracts must be shared before arbitrary widgets can be advertised as a supported shape capability.

A widget overlay also has no automatic 120 fps guarantee. Widget layout, menus and focus changes need representative release measurements alongside canvas movement.

Accessibility

When Flutter semantics are enabled, visible canvas objects expose their type and available text, selection state, and lock state. Activating an object selects it through the same session command path as pointer selection. Semantic bounds follow the camera; offscreen objects are omitted.

While editing text, the shared paragraph component exposes the active block as a text field, including its current value and selection. Accessibility text and selection changes use the same canonical editing pipeline as the IME and remain subject to change admission and undo/redo.

This is initial support, not a complete screen-reader editing contract. Traversal between offscreen objects and paragraph/list blocks, custom localized object descriptions, richer editing actions, and assistive-technology compatibility remain under development.

Touch navigation

Two fingers pan and zoom the viewport. The second contact cancels any active object preview, exits text editing, and transfers ownership to camera navigation. A combined sample publishes one camera state, respects zoom limits and finite-canvas bounds, and does not add an undo entry. After one finger lifts, the remaining contact cannot become an object drag; release every contact before starting another single-finger interaction.

A third contact does not change the active pair until one of that pair ends. Contact cancellation releases ownership just like lifting a finger. Physical iOS Safari and Android Chrome verification remains pending; widget tests of touch events do not certify browser gesture interception or mobile keyboard behavior.