Back to results for “Shapes”
Flutter › Custom Painters & CustomPaint

How do you draw more complex custom shapes using the Path class within a CustomPainter, rather than being limited to Flutter's simpler built in shapes like circles and rectangles?

Intermediate

Answer

The Path class lets you construct an arbitrarily complex custom shape by describing a sequence of individual drawing movements, such as moving to a specific starting point, drawing a straight line to another point, or drawing a smooth curved line using a quadratic or cubic bezier curve, and once a Path object has been fully constructed describing your desired shape's outline, you can pass it to the canvas's drawPath method to actually render that complete custom shape, which enables drawing complex custom graphics like a custom wave shape or an irregular polygon that would not be possible using Flutter's simpler built in shape drawing methods alone.
final path = Path()
  ..moveTo(0, 50)
  ..quadraticBezierTo(100, 0, 200, 50)
  ..lineTo(200, 100)
  ..close();
canvas.drawPath(path, paint);
Real-world example A weather app draws a smooth, custom wavy line representing an animated water level using the Path class's quadraticBezierTo method, achieving a naturally curved visual effect that would be impossible using only straight lines.

Common follow-ups: What is the difference between a quadratic and a cubic bezier curve?;How do you fill a custom path shape with a color versus only drawing its outline?