How to show progress bar with dots indicating the progress?

Question

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

Solution

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;
}

Comments

[Keerti Purswani]

That is amazing! Thank you! :)