Flutter Mobile Development · Lektion

Die Canvas-API: Pfade, Paints und Shader

Zeichnen Sie Formen, Farbverläufe und Linien mit Canvas-Grundelementen und der Paint-Konfiguration.

Die Canvas-API: Pfade, Paints und Shader ist eine kostenlose Flutter Mobile Development-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Flutter Mobile Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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.

Häufig gestellte Fragen

Ist die Lektion „Die Canvas-API: Pfade, Paints und Shader“ kostenlos?

Ja — der vollständige Text von „Die Canvas-API: Pfade, Paints und Shader“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Flutter Mobile Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Flutter Mobile Development-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Die Canvas-API: Pfade, Paints und Shader“?

Zeichnen Sie Formen, Farbverläufe und Linien mit Canvas-Grundelementen und der Paint-Konfiguration. Du übst Flutter Mobile Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Flutter Mobile Development zu starten?

Keine Vorkenntnisse erforderlich. Flutter Mobile Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Die Canvas-API: Pfade, Paints und Shader“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Flutter Mobile Development-Lektion Code schreiben und ausführen?

Ja. Jede Flutter Mobile Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Die Canvas-API: Pfade, Paints und Shader
Ein interaktives eigenes Chart-Widget erstellen
Clipping, Blend-Modi und Layer-Compositing
Hit-Testing und Optimierung des Neuzeichnens

← Zurück zu Flutter Mobile Development