[Flutter] Draw line cross multiple column in Flutter

Hi guys, i wanted to draw something like this in flutter and i want this to be dynamic because the payments could be more than 3.

Also, to make sure that the payments, due date and indicator are aligned I thought of putting these three elements in one column and placing the three columns in one row. Now i'm stuck and I don’t know how to make the line cross the three dots without exceeding the sides and with a dynamic width.

This is what i've done since now:

Stack(
children: [
Positioned(
bottom: 5,
left: 0,
right: 0,
child: Container(
height: 2,
color: AppColors.uiGrayscale500,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
...[0,1,2,3].map(
(payment) {
return Column(
children: [
Text(
'due date'
),
Text(
'amount'
),
Container(
width: 12,
height: 12,
margin: const EdgeInsets.only(top: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.red
),
)
],
);
},
),
],
),
],
),


Could please someone help me?

Continue reading...