Vertical dotted Line between two or multiple points in Flutter - flutter

Question

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.

Answer 1

I think drawing is more efficient than creating more containers like the one above. If you don't want to use the library, you can use my following method, simply adding a few lines:
Create class DashedLineVerticalPainter:
class DashedLineVerticalPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
double dashHeight = 5, dashSpace = 3, startY = 0;
final paint = Paint()
..color = Colors.grey[300]
..strokeWidth = size.width;
while (startY < size.height) {
canvas.drawLine(Offset(0, startY), Offset(0, startY + dashHeight), paint);
startY += dashHeight + dashSpace;
}
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
And use it:
CustomPaint(
size: Size(1, double.infinity),
painter: DashedLineVerticalPainter()
)
Result:

Answer 2

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

Answer 3

class _MyWidgetState extends State<MyWidget> {
List<Model> list = [];
#override
void initState() {
super.initState();
list.add(Model("Hyderabad", Colors.red));
list.add(Model("Visakhapatnam", Colors.green));
list.add(Model("Vijayawada", Colors.blue));
}
void addNew() {
setState(() {
list.add(Model("Karnool", Colors.black));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
title:
Text('Custom Stepper', style: TextStyle(color: Colors.white)),
actions: [
IconButton(
icon: Icon(Icons.add_circle, color: Colors.white),
onPressed: addNew)
]),
body: Container(
padding: EdgeInsets.all(15),
color: Colors.white,
child: ListView.builder(
itemCount: list.length,
itemBuilder: (con, ind) {
return ind != 0
? Column(mainAxisSize: MainAxisSize.min, children: [
Row(children: [
Column(
children: List.generate(
3,
(ii) => Padding(
padding: EdgeInsets.only(
left: 10, right: 10, top: 5, bottom: 5),
child: Container(
height: 3,
width: 2,
color: Colors.grey,
)),
),
),
Expanded(
child: Container(
color: Colors.grey.withAlpha(60),
height: 0.5,
padding: EdgeInsets.only(
left: 10,
right: 20,
),
))
]),
Row(children: [
Icon(Icons.location_on, color: list[ind].color),
Text(list[ind].address,
style: TextStyle(color: list[ind].color))
])
])
: Row(children: [
Icon(Icons.location_on, color: list[ind].color),
Text(list[ind].address,
style: TextStyle(color: list[ind].color))
]);
})));
}
}
class Model {
String address;
double lat;
double long;
Color color;
//Other fields if needed....
Model(this.address, this.color);
//initialise other fields so on....
}

Answer 4

return Container(
child: Row(
children: <Widget>[
Column(children: <Widget>[
Icon(Icons.radio_button_checked,color: Colors.orange,)
Dash(
direction: Axis.vertical,
length: 20,
dashLength: 5,
thickness:3.0,
dashColor: Colors.grey[400]),
Icon(Icons.location_on,color: Colors.blue,)
],
),
Column(children: <Widget>[
Text("Some text"),
Divider(),
Text("Some Text")
],
),
],
)
);