Vertical dotted Line between two or multiple points in Flutter
Solution 1
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,
),
),
],
),
Solution 2
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 = 1;
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:
Solution 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....
}
Mateen
Experienced Hybrid Mobile Application (Flutter), Native Android and Core Java Developer with a demonstrated history of working in Logistic and Information Technology and services industry. Being a quick learner, team leading, time management I'm involving with management section to manage team, understand current problems and requirements to shape into technical specifications. As a mobile lead, I'm also responsible to provide better design and flow. I like to play Cricket, badminton.
Updated on December 18, 2022Comments
-
Mateen over 1 year
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.
-
Yahav Festinger over 3 yearsDo you know by any chance how to modify your code in order that the line will be appeared over the shapes (in front of them)?
-
Nehal Jaisalmeria over 2 yearsTry changing icon size to
80
and it won't work properly.