Flutter dotted line drawing, core understanding of two points

First, let’s talk about the background of drawing dashed lines by myself: UI design is very novel, and there is no complete match between relevant third parties (even if there is, it will not be used. Generally, it will not embed a third party for a function, but will only learn from the third party to achieve their own implementation, better maintenance and expansion, and less code).

Fl_chart provides many types of chart drawing, with high code complexity and difficulty to read. If you are interested, you can have a deep understanding of this framework. The implementation of dashed line is extracted from FL_chart, but the core logic is very simple, just a dozen lines of code. Some core implementations are extracted in turn to make it easier to implement your custom chart requirements later.

Dashed line drawing, first we know how to draw solid lines, and then we convert solid lines to dashed lines, so first we have to know how to draw solid lines.

The drawing code of the solid line is shown below :(the effect is a blue vertical line)

The code for drawing a solid line is very simple. Dashed lines can be thought of as drawing a lot of very short solid lines, that is, a lot of subpaths, and then performing drawPath.

Convert the Path of the solid line into the Path of the dotted line. Then draw the dotted line. In the code, each Path is 4 in length and the interval is 2.

At the heart of the dashed Path conversion, you need to understand the following two codes:

1, path.putemetrics (), get the outline of Path.

Metric. ExtractPath (distance, distance +dottedLength), extract the subpath from the contour.

The clipped subpath is added with targetPath.addPath and then canvas.drawPath is OK. Knowing this core logic, the dotted line implementation is easy.

Note: For any dotted line drawing shape, you can first implement the corresponding solid Path and then use the _convertDotterPath method to convert it

⚠️ Some materials use ListView to implement dotted line, can achieve some simple dotted line customization, but not recommended.