0Pricing
Flutter Mobile Development · Lección

La API Canvas: rutas, pinturas y shaders

Dibuje formas, degradados y trazos mediante las primitivas de Canvas y la configuración de Paint.

La API Canvas: rutas, pinturas y shaders es una lección gratuita de Flutter Mobile Development en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Flutter Mobile Development, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Flutter Mobile Development incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

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.

Preguntas frecuentes

¿La lección «La API Canvas: rutas, pinturas y shaders» es gratis?

Sí — el texto completo de «La API Canvas: rutas, pinturas y shaders» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Flutter Mobile Development, actualiza a CoddyKit PRO. El curso de Flutter Mobile Development incluye 4 lecciones en total.

¿Qué aprenderé en «La API Canvas: rutas, pinturas y shaders»?

Dibuje formas, degradados y trazos mediante las primitivas de Canvas y la configuración de Paint. Practicas Flutter Mobile Development con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Flutter Mobile Development?

No se requiere experiencia previa. Flutter Mobile Development en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «La API Canvas: rutas, pinturas y shaders»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Flutter Mobile Development?

Sí. Cada lección de Flutter Mobile Development incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. La API Canvas: rutas, pinturas y shaders
  2. Construcción de un widget de gráfico personalizado interactivo
  3. Recorte, modos de mezcla y composición de capas
  4. Detección de impactos y optimización del repintado
← Volver a Flutter Mobile Development