Flutter's Path Class: Drawing Custom Shapes
Flutter's Path is a digital pen for drawing any custom shape. Use it for complex icons, charts, or clipping widgets into non-rectangular forms. The footgun: forgetting moveTo will connect separate parts of your drawing with an unwanted line.
Why it exists
Flutter's built-in widgets are great for standard layouts, but many designs require shapes that aren't simple rectangles or circles. The Path class provides a low-level, powerful way to define and render any custom 2D geometry, giving developers full control over the visual appearance of their UI.
The mental model
Think of a Path object like an invisible pen on a piece of graph paper. You give it a series of commands: "move the pen to (x, y) without drawing" (moveTo), "draw a straight line to (x, y)" (lineTo), or "draw a curve to (x, y)" (cubicTo, arcTo). The result is a set of instructions that can be used to draw a shape or define a clipping area.
How it works
You create a Path object and then call its methods to build up the shape. The path maintains a "current point". Operations like lineTo or cubicTo add a segment from the current point to a new point, updating the current point in the process. The moveTo method lets you reposition the current point without adding a line segment, which is essential for creating disjoint shapes within the same path. Once defined, you pass this Path object to a CustomPainter's canvas.drawPath() method to render it, or to a ClipPath widget to use it as a mask.
When to use it
Use Path for any non-standard shape. This includes custom icons that aren't available in a font, complex data visualizations like line graphs or pie charts, creating wave-like dividers between sections, or clipping a user's profile picture into a hexagon. It's the foundation for Flutter's CustomPaint and ClipPath widgets.
When not to use it
Don't use Path for simple shapes that already have dedicated widgets or methods. For a simple rectangle, use a Container. For a rounded rectangle, use a Container with BorderRadius or the path's own addRRect method instead of manually drawing four lines and four arcs. Path is for when the built-in primitives are insufficient.
One canonical example
To draw a simple triangle, you would create a Path, call moveTo() to position the pen at the first corner, call lineTo() to draw a line to the second corner, call lineTo() again to draw to the third corner, and finally call close() to draw a line back to the starting point, completing the shape. This Path object can then be painted on the screen.
Interview question
What happens if `moveTo` is forgotten when creating disjoint shapes within a single Flutter Path object?
- a.An unwanted straight line segment will connect the separate parts of the shape.Correct
- b.The path will automatically close the previous subpath before continuing.
- c.Subsequent drawing commands will be ignored until a `moveTo` is explicitly called.
- d.The drawing operation will throw a runtime error due to an incomplete path definition.
Why? this is the answer
The card explicitly states that forgetting `moveTo` will connect separate parts of your drawing with an unwanted line. `moveTo` is crucial for repositioning the 'pen' without drawing, allowing for distinct, unconnected segments within a single path; without it, drawing commands continue from the last point.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles