Flutter Mobile Development · Aula

A API Canvas: Caminhos, Pinturas e Sombreadores

Desenhe formas, gradientes e traços usando as primitivas de Canvas e a configuração de Paint.

A API Canvas: Caminhos, Pinturas e Sombreadores é uma aula grátis de Flutter Mobile Development no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Flutter Mobile Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Flutter Mobile Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em 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.

Perguntas Frequentes

A aula “A API Canvas: Caminhos, Pinturas e Sombreadores” é grátis?

Sim — o texto completo de “A API Canvas: Caminhos, Pinturas e Sombreadores” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Flutter Mobile Development, atualize para CoddyKit PRO. O curso de Flutter Mobile Development inclui 4 aulas no total.

O que vou aprender em “A API Canvas: Caminhos, Pinturas e Sombreadores”?

Desenhe formas, gradientes e traços usando as primitivas de Canvas e a configuração de Paint. Você pratica Flutter Mobile Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Flutter Mobile Development?

Nenhuma experiência prévia é necessária. Flutter Mobile Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “A API Canvas: Caminhos, Pinturas e Sombreadores”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Flutter Mobile Development?

Sim. Cada aula de Flutter Mobile Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

A API Canvas: Caminhos, Pinturas e Sombreadores
Construção de um Widget de Gráfico Interativo Personalizado
Recorte, Modos de Mesclagem e Composição de Camadas
Testes de Colisão e Otimização de Repintura

← Voltar para Flutter Mobile Development