How would you draw a line graph using Canvas and Path?
Fluency with Flutter's imperative drawing model and Path construction.
Use moveTo for the first point, lineTo for the rest, then Canvas.drawPath with a stroke Paint.
What's really being asked
This question probes your comfort with Flutter's immediate-mode 2D graphics API in dart:ui, specifically the difference between geometric description and rasterization. The interviewer wants to see that you know a Path is just a container for sub-paths and segments, that it maintains a current point, and that it must be handed to a Canvas with a Paint to become visible. It also checks whether you can translate a list of data points into a series of connected line segments efficiently.
The full answer
First, instantiate a Path object. Second, call moveTo with the x and y of the first data point to start a new sub-path at that coordinate; this sets the current point without drawing anything. Third, loop over the remaining points and call lineTo for each one; each call adds a straight segment from the previous current point to the new coordinate and updates the current point automatically. Fourth, create a Paint object, set its style to PaintingStyle.stroke, choose a color and stroke width, and call canvas.drawPath(path, paint). A strong candidate also mentions addPolygon as a concise alternative that accepts a List of Offset and a boolean close flag, which is useful for open polylines. Mentioning that the Path lives inside a CustomPainter paint method shows you understand where this code runs.
The mistakes people make
A frequent mistake is skipping moveTo and beginning with lineTo on the first point; because the current point starts at the origin, this draws an extra diagonal line from zero into your data. Another red flag is forgetting to set Paint.style to stroke, which leaves the default fill and makes a thin line graph invisible. Some candidates describe using widgets like Container or Row to draw the graph, revealing confusion about when custom rendering is appropriate. Others suggest cubicTo or arcTo for a simple line graph, which is over-engineered unless the question explicitly asks for curves.
What usually comes next
The interviewer may ask how you would map data values to canvas coordinates given a specific size, which tests your ability to compute scales and offsets. They might ask how to add smooth bezier curves between points instead of straight lines, which would involve cubicTo or quadraticBezierTo with control points derived from neighboring data. You could also be asked about performance, such as caching the Path in a CustomPainter so it is not rebuilt every frame, or using computeMetrics to animate the drawing of the line over time.
A concrete example
Imagine a CustomPainter that receives List<Offset> points. In the paint method, you write Path path = Path(); path.moveTo(points[0].dx, points[0].dy); for (int i = 1; i < points.length; i++) { path.lineTo(points[i].dx, points[i].dy); } Paint linePaint = Paint()..color = Colors.blue..strokeWidth = 2.0..style = PaintingStyle.stroke; canvas.drawPath(path, linePaint); If you prefer a single call, path.addPolygon(points, false) replaces the loop and moveTo entirely.
Interview question
When drawing a line graph with Canvas and Path, what is the consequence of omitting moveTo() and calling lineTo() on the first data point?
- a.An extra segment is drawn from the origin to the first pointCorrect
- b.The path renders as a filled shape instead of a line
- c.The app throws a StateError because the current point is undefined
- d.The first point is skipped and drawing begins from the second point
Why? this is the answer
Omitting moveTo leaves the Path's current point at the origin, so the first lineTo draws an unintended segment from (0,0). Option B describes a different common mistake: forgetting to set Paint.style to stroke, which makes the line invisible rather than adding a diagonal.
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