How to show progress bar with dots indicating the progress? - dart

Question

How to make a widget indicating the progress look like the attached image?

Answer 1

Well, you can actually create it yourself by extending a CustomPainter class and then insert it in your widget tree with a CustomPaint widget.
I've actually managed to provide an example for you, feel free to tweak it for your needs. The result is something like this:
class MyDeliveryProgress extends StatefulWidget {
_StepperState createState() => _StepperState();
}
class _StepperState extends State<MyDeliveryProgress> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: RichText(
text: TextSpan(
text: 'Ordered',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: '\n20 Dec',
style: TextStyle(fontWeight: FontWeight.normal),
),
]),
textAlign: TextAlign.center,
)),
//Text('Ordered'),
Expanded(
flex: 3,
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Text(
'Shipped (${DateTime.now().day.toString()} Dec)',
style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: CustomPaint(
painter: MyProgressLine(
estDelivery: DateTime(2019, 1, 1),
shipped: DateTime(2018, 12, 20),
),
child: Container(
width: double.infinity,
height: 5.0,
),
),
),
),
],
),
)),
Expanded(
child: RichText(
text: TextSpan(
text: 'Delivery',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
children: [
TextSpan(
text: '\n1 Jan',
style: TextStyle(fontWeight: FontWeight.normal),
),
]),
textAlign: TextAlign.center,
)),
],
),
)));
}
}
class MyProgressLine extends CustomPainter {
MyProgressLine({this.shipped, this.estDelivery});
final DateTime shipped;
final DateTime estDelivery;
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.green
..strokeWidth = 3.0
..style = PaintingStyle.stroke;
double endPointsRadius = 5.0;
double width = size.width;
int totalDays = ((estDelivery.millisecondsSinceEpoch - shipped.millisecondsSinceEpoch) / 86400000).floor();
int currentDay = ((DateTime.now().millisecondsSinceEpoch - shipped.millisecondsSinceEpoch) / 86400000).floor();
double stepPerDay = width / totalDays;
// Draws starting point
canvas.drawCircle(Offset.zero, endPointsRadius, paint);
canvas.drawLine(Offset(endPointsRadius, 0.0), Offset(endPointsRadius + stepPerDay * currentDay, 0.0), paint);
// Draws current progress line
paint.style = PaintingStyle.fill;
canvas.drawCircle(Offset(endPointsRadius + stepPerDay * currentDay, 0.0), 3.0, paint);
// Draws endpoint
paint.style = PaintingStyle.stroke;
paint.color = Colors.grey.withOpacity(0.5);
canvas.drawLine(Offset(endPointsRadius + stepPerDay * currentDay, 0.0), Offset(stepPerDay * totalDays, 0.0), paint);
canvas.drawCircle(Offset((stepPerDay * totalDays) + endPointsRadius, 0.0), endPointsRadius, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}