Flutter Mobile Development · Lezione

API Canvas: tracciati, pennelli e shader

Disegni forme, gradienti e tratti usando le primitive Canvas e la configurazione di Paint.

API Canvas: tracciati, pennelli e shader è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Meet the Canvas

When you build a CustomPainter, Flutter hands you two things in paint(): a Canvas and a Size.

Canvas is your drawing surface. It exposes primitives like drawRect, drawCircle, drawPath, and drawLine.
Size tells you how big the area is, so you can scale your drawing to fit any device.

Every draw call needs a Paint object that describes how to draw: color, stroke vs fill, width, and more.

void paint(Canvas canvas, Size size) {
  final paint = Paint()..color = const Color(0xFF2196F3);
  canvas.drawRect(
    Rect.fromLTWH(0, 0, size.width, size.height),
    paint,
  );
}

The Paint Object

A Paint is a bundle of styling options. The most important fields are:

color — the color used to draw.
style — PaintingStyle.fill (solid interior) or PaintingStyle.stroke (outline only).
strokeWidth — line thickness when stroking.
isAntiAlias — smooth edges, on by default.

Flutter idiom uses the cascade operator .. to configure a freshly created Paint in one expression.

final fill = Paint()
  ..color = const Color(0xFFE91E63)
  ..style = PaintingStyle.fill;

final outline = Paint()
  ..color = const Color(0xFF000000)
  ..style = PaintingStyle.stroke
  ..strokeWidth = 4.0;

Drawing Basic Shapes

The Canvas offers ready-made primitives so you do not always need a path:

drawRect(Rect, Paint) — axis-aligned rectangle.
drawRRect(RRect, Paint) — rounded rectangle.
drawCircle(Offset center, double radius, Paint)
drawOval(Rect, Paint) — fills the bounding rect with an ellipse.

Coordinates start at (0,0) in the top-left corner; x grows right, y grows down.

void paint(Canvas canvas, Size size) {
  final p = Paint()..color = const Color(0xFF4CAF50);
  final center = Offset(size.width / 2, size.height / 2);

  canvas.drawCircle(center, 40, p);
  canvas.drawRRect(
    RRect.fromRectAndRadius(
      Rect.fromLTWH(10, 10, 80, 50),
      const Radius.circular(12),
    ),
    p,
  );
}

Strokes: Caps, Joins, and Width

When style is PaintingStyle.stroke, several properties shape the line:

strokeWidth — thickness in logical pixels.
strokeCap — how line ends look: butt, round, or square.
strokeJoin — how corners connect: miter, round, or bevel.

Round caps and joins are common for friendly, smooth chart and signature drawing.

final stroke = Paint()
  ..color = const Color(0xFF9C27B0)
  ..style = PaintingStyle.stroke
  ..strokeWidth = 6.0
  ..strokeCap = StrokeCap.round
  ..strokeJoin = StrokeJoin.round;

// canvas.drawLine(Offset(10, 10), Offset(120, 60), stroke);

Building a Path

A Path describes an arbitrary outline made of line and curve segments. The core methods are:

moveTo(x, y) — lift the pen and start a new subpath.
lineTo(x, y) — draw a straight segment.
quadraticBezierTo / cubicTo — curved segments.
close() — connect back to the subpath start.

Draw the finished path with canvas.drawPath(path, paint).

void paint(Canvas canvas, Size size) {
  final path = Path()
    ..moveTo(size.width / 2, 0)
    ..lineTo(size.width, size.height)
    ..lineTo(0, size.height)
    ..close();

  final paint = Paint()..color = const Color(0xFFFF5722);
  canvas.drawPath(path, paint);
}

Curves with Bezier Segments

Smooth shapes come from Bezier curves. The most common is the quadratic Bezier, which uses one control point.

quadraticBezierTo(cpx, cpy, x, y) bends the line toward the control point (cpx, cpy) on its way to the end point (x, y).
cubicTo(c1x, c1y, c2x, c2y, x, y) uses two control points for S-curves.

These power wave dividers, chart lines, and speech-bubble tails.

void paint(Canvas canvas, Size size) {
  final wave = Path()
    ..moveTo(0, size.height * 0.5)
    ..quadraticBezierTo(
      size.width * 0.25, size.height * 0.2,
      size.width * 0.5, size.height * 0.5,
    )
    ..quadraticBezierTo(
      size.width * 0.75, size.height * 0.8,
      size.width, size.height * 0.5,
    );

  final paint = Paint()
    ..color = const Color(0xFF00BCD4)
    ..style = PaintingStyle.stroke
    ..strokeWidth = 3;
  canvas.drawPath(wave, paint);
}

Plain Dart: Computing Points

Canvas math is just geometry. Before you draw, you often compute coordinates with plain Dart. Here we generate evenly spaced points along a sine wave — the same values you would feed into path.lineTo.

This logic is framework-free, so you can unit-test it without rendering anything.

import 'dart:math';

List<Point<double>> wavePoints(double width, double height, int n) {
  final pts = <Point<double>>[];
  for (var i = 0; i <= n; i++) {
    final x = width * i / n;
    final y = height / 2 + sin(i / n * 2 * pi) * height / 4;
    pts.add(Point(x, y));
  }
  return pts;
}

void main() {
  final pts = wavePoints(200, 100, 4);
  for (final p in pts) {
    print('(${p.x.toStringAsFixed(1)}, ${p.y.toStringAsFixed(1)})');
  }
}

Shaders: Linear Gradients

A shader fills a shape with more than a flat color. The most common is a linear gradient. You build it with ui.Gradient.linear and assign it to paint.shader.

from / to are the start and end Offsets of the gradient line.
colors lists the gradient stops, blended along that line.

Once shader is set, the paint's color is ignored for fills.

import 'dart:ui' as ui;

Paint gradientPaint(Size size) {
  return Paint()
    ..shader = ui.Gradient.linear(
      Offset.zero,
      Offset(size.width, size.height),
      const [Color(0xFF2196F3), Color(0xFF9C27B0)],
    );
}

Radial and Sweep Gradients

Beyond linear, Flutter offers two more gradient shaders:

Radial — ui.Gradient.radial(center, radius, colors) blends outward from a center point, great for glows and spotlights.
Sweep — ui.Gradient.sweep(center, colors) rotates colors around a center, ideal for circular progress and color wheels.

You can add an optional stops list (0.0 to 1.0) to control exactly where each color sits.

import 'dart:ui' as ui;

Paint glow(Offset center) {
  return Paint()
    ..shader = ui.Gradient.radial(
      center,
      60,
      const [Color(0xFFFFEB3B), Color(0x00FFEB3B)],
      const [0.0, 1.0],
    );
}

Putting It Together in a Painter

A real CustomPainter combines paths, paints, and shaders. Remember two overrides:

paint(canvas, size) — do the drawing.
shouldRepaint(old) — return true only when inputs changed, so Flutter avoids needless repaints.

This snippet draws a gradient-filled rounded card with a stroked border.

class CardPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTWH(0, 0, size.width, size.height);
    final rrect = RRect.fromRectAndRadius(rect, const Radius.circular(16));

    final fill = Paint()
      ..shader = ui.Gradient.linear(
        rect.topLeft, rect.bottomRight,
        const [Color(0xFF42A5F5), Color(0xFF7E57C2)],
      );
    canvas.drawRRect(rrect, fill);

    final border = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = const Color(0x33000000);
    canvas.drawRRect(rrect, border);
  }

  @override
  bool shouldRepaint(CardPainter oldDelegate) => false;
}

Save, Restore, and Transforms

The Canvas keeps a stack of transforms and clips. Use it to draw rotated or scaled content without permanently changing state:

canvas.save() pushes the current matrix.
canvas.translate / rotate / scale modify it.
canvas.restore() pops back to where you were.

Always pair every save() with a restore(), or later draws will inherit the transform.

void paint(Canvas canvas, Size size) {
  final p = Paint()..color = const Color(0xFF3F51B5);
  canvas.save();
  canvas.translate(size.width / 2, size.height / 2);
  canvas.rotate(0.785398); // 45 degrees in radians
  canvas.drawRect(
    const Rect.fromLTWH(-30, -30, 60, 60),
    p,
  );
  canvas.restore();
}

Quick Check

Test your understanding of the Paint configuration.

Recap

You now command the Canvas API:

Paint controls how you draw: color, style (fill vs stroke), strokeWidth, caps, and joins.
Primitives like drawRect, drawRRect, and drawCircle handle common shapes; Path with moveTo, lineTo, and Bezier curves handles anything custom.
Shaders (Gradient.linear, radial, sweep) fill or stroke with gradients and override the flat color.
save/restore isolates transforms, and shouldRepaint keeps rendering efficient.

With these building blocks you can draw charts, custom controls, and rich decorations entirely in Dart.

Domande Frequenti

La lezione «API Canvas: tracciati, pennelli e shader» è gratuita?

Sì — il testo completo di «API Canvas: tracciati, pennelli e shader» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.

Cosa imparerò in «API Canvas: tracciati, pennelli e shader»?

Disegni forme, gradienti e tratti usando le primitive Canvas e la configurazione di Paint. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Flutter Mobile Development?

Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «API Canvas: tracciati, pennelli e shader»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?

Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

API Canvas: tracciati, pennelli e shader
Creazione di un widget grafico interattivo personalizzato
Clipping, modalità di fusione e composizione dei layer
Hit testing e ottimizzazione del repaint

← Torna a Flutter Mobile Development