Want to show progress bar with dots indicating the progress? 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 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; } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
