Canvas

A sub-cell drawing surface for custom plots, diagrams, and markers.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

// import 'dart:math' show sin;
class SineWavePainter extends CanvasPainter {
  @override
  void paint(CanvasContext ctx) {
    const segments = 96;
    for (var i = 0; i < segments; i++) {
      final x1 = 6.28 * i / segments;
      final x2 = 6.28 * (i + 1) / segments;
      ctx.drawLine(x1, sin(x1), x2, sin(x2));
    }
  }
}

// In build:
Canvas(
  painter: SineWavePainter(),
  bounds: const CanvasBounds(minX: 0, maxX: 6.28, minY: -1, maxY: 1),
  semanticRole: SemanticRole.chart,
  semanticLabel: 'Sine wave',
)

Details

Subclass CanvasPainter and draw with CanvasContext.drawLine and CanvasContext.drawDot in the logical coordinate space described by bounds. marker selects how those points map onto terminal cells; the braille default packs a 2×4 grid of dots into each cell, and LineChart is built on the same primitive. Provide semantic metadata when the drawing communicates information that is not otherwise represented by an enclosing widget.

Constructors

`Canvas()`

Parameter	Type	Default	Description
`painter:`	`CanvasPainter`	required	Drawing routine invoked with logical `bounds` during canvas painting. More
`bounds:`	`CanvasBounds?`	—	Logical coordinate range. Defaults to `CanvasBounds.unit`.
`marker:`	`CanvasMarker`	`CanvasMarker.braille`	Sub-cell rendering style. See `CanvasMarker` for the tradeoffs.
`semanticRole:`	`SemanticRole`	`SemanticRole.image`	Semantic role used when this canvas opts into semantics. More
`semanticLabel:`	`String?`	—	Optional label that exposes the canvas to the semantic app graph. More
`semanticValue:`	`Object?`	—	Optional semantic value for the drawn content.
`semanticHint:`	`String?`	—	Optional semantic hint for the drawn content.
`semanticState:`	`SemanticState`	`SemanticState.empty`	Additional semantic state for custom canvas surfaces.

painter: The canvas repaints whenever it is rebuilt, even with the same painter instance, so a painter can read data that changes between builds.
semanticRole: Defaults to SemanticRole.image. Custom plots can use SemanticRole.chart and provide chart-specific semanticState.
semanticLabel: Plain canvases do not contribute semantics because higher-level widgets such as charts wrap their drawing surface with richer meaning.

Source

Canvas is defined in packages/fleury/lib/src/catalog/canvas.dart.

Category: Charts & meters · All widgets

Example · editable

class _CanvasExample extends StatelessWidget {
  const _CanvasExample();

  @override
  Widget build(BuildContext context) => SizedBox(
    width: 48,
    height: 9,
    child: Canvas(
      painter: _SineWavePainter(),
      // The painter draws in these logical coordinates: one period of sin(x).
      bounds: const CanvasBounds(minX: 0, maxX: 6.28, minY: -1, maxY: 1),
      semanticRole: SemanticRole.chart,
      semanticLabel: 'Sine wave',
    ),
  );
}

/// Draws one period of sin(x) as short line segments.
class _SineWavePainter extends CanvasPainter {
  @override
  void paint(CanvasContext ctx) {
    const segments = 96;
    for (var i = 0; i < segments; i++) {
      final x1 = 6.28 * i / segments;
      final x2 = 6.28 * (i + 1) / segments;
      ctx.drawLine(x1, sin(x1), x2, sin(x2));
    }
  }
}

Live preview

Live

ⓘ how this demo runs