Flutter — paint dotted line (both horizontal and vertical axis)

Lets create a widget that rendering horizontal or vertical dotted line having these features:

  • Paint style will be customizable. User will be able to define its own paint style.
  • Dot size and gap size between dots will be customizable.
  • And most importantly, the line will be symmetric with respect to the midpoint of line for any size.

If you interested in dashed line (symmetric formulated), please read this article Flutter — paint dashed line (both horizontal and vertical axis)

If you interested in zigzag line, please read this article Flutter — paint zigzagline (both horizontal and vertical axis)

Let’s start designing an abstract line class, we will extend line pattern classes from this class:

Now, let’s extend two line pattern class: solid and dotted. Our focus will be on dotted line, but in some cases we will use solid line painter which with more performance (always escape from unnecessary calculation).

Let’s design our line painter class — Line painter will take line definition (which is solid or dotted) and the paint style as parameter to produce the requested line.

Let’s design our AdvancedLine widget. Please notice that, our line painter class rendering only horizontal lines, if user requests vertical line, AdvancedLine widget will rotate the rendered horizontal line 90 degrees.

Let’s build some dotted line outputs:

We can provide symmetry with a very simple calculation method.

Best regards.

Java, Flutter — Dart Software Developer