How would you draw a line graph using Canvas and Path?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.