Search code examples
flutterpathflutter-layoutdotted-line

Vertical dotted Line between two or multiple points in Flutter


I need a lil help to draw dotted line between 2 points without using google map's poly lines. I tried with canvas, it does but not exactly start under and above location.

Right now you can see 2 points later it'll be more than 2 points. It really appreciated if anyone help me to achieve.

Expected Result


Solution

  • I have made almost same looking widget by using https://pub.dev/packages/flutter_dash, you can also customise this widget according to your style.

    enter image description here

    Here is the code,Hope it helps.

      Column(children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(top: 16),
                        height: 25,
                        width: 25,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border:
                                Border.all(width: 1.5, color: Colors.greenAccent)),
                      ),
                      Dash(
                          direction: Axis.vertical,
                          length: 130,
                          dashLength: 15,
                          dashColor: grey),
                      Container(
                        height: 25,
                        width: 25,
                        decoration: BoxDecoration(
                            shape: BoxShape.rectangle,
                            border: Border.all(width: 2, color: red)),
                        child: Container(
                          height: 20,
                        ),
                      ),
                    ],
                  ),