Vertical dotted Line between two or multiple points in Flutter

Mateen picture Mateen · Feb 21, 2020 · Viewed 8.2k times · Source

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

Answer

Anirudh Sharma picture Anirudh Sharma · Feb 21, 2020

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,
                    ),
                  ),
                ],
              ),