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…


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

  • Paint style will be customizable. User will be able to define its own paint style.
  • Zigzag depth (height) and angle will be customizable

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

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

abstract class Line {}

Now, let’s extend two line pattern class: solid and zigzag. Our focus will be on zigzag line, but in some cases…


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

  • Paint style will be customizable. User will be able to define its own paint style.
  • Length of dash and gap will be customizable.
  • And most importantly, the line will be symmetric with respect to the midpoint of line (mathematically formulated) for any size.

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:

abstract class Line {}

Now, let’s extend two…


Lets design horizontal divider widget having these features:

  • Thickness and color selection
  • Define left & right indent, margin insets
  • Define any widget (maybe icon, maybe text, anything) as label with label alignmet(combination of [top, center, bottom] x [left, center, right]) and label margin insets

First of all, let’s design a prototype that will wrap the divider:

Divider wrapper design

Our outer wrapper would be a container, because we could apply margin which to be determined by user as EdgeInsets.

Place a row widget inside this wrapper container, so we could determine left and right indent as sized boxes. …


Lets design an avatar widget with badge having these features:

  • Avatar widget would be any asking size. And of course the badge also.
  • Widget’s shape would be chosen (i will design two shape class: Circle and Square). Square borders’ radius would be changable.
  • Avatar badge position would be chosen: combination of [top, center, bottom] x [left, center, right]
  • Avatar badge would be positioned on shape line (and yes, no matter shape, border radius, avatar widget size, badge size etc.). But how? Avatar badge position would be calculated with mathematical formulation.
  • And the perfect side of this design: Some features would…

İsmail Can Şeker

Java, Flutter — Dart Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store