How to make ArcProgress Bar in Flutter?

You can use the CircularPercentIndicator like this :

         @override
      Widget build(BuildContext context) {

        double yourPercentage = 0.5;

        return Scaffold(
          body: Center(
            child: CircularPercentIndicator(
              radius: 100.0,
              startAngle: 220,
              percent: 0.775 * yourPercentage,
              animation: true,
              backgroundColor: Colors.transparent,
              center: Text("50%"),
            ),
          ),
        );
      }

Just change the yourPercentage variable according to your needs.

UPDATE (16/05/2019)

I updated my code (not published yet on pub), but you can use like this way:

In pubspec.yaml

 percent_indicator:
    git:
      url: https://github.com/diegoveloper/flutter_percent_indicator.git

Code

    CircularPercentIndicator(
                  radius: 120.0,
                  animation: true,
                  animationDuration: 2000,
                  lineWidth: 10.0,
                  percent: 0.5,
                  reverse: true,
                  arcBackgroundColor: Colors.teal,
                  arcType: ArcType.FULL,
                  center: Text(
                    "20 hours",
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0),
                  ),
                  circularStrokeCap: CircularStrokeCap.butt,
                  backgroundColor: Colors.transparent,
                  progressColor: Colors.red,
                ),

You can achieve this using Flutter CustomPaint class like this. This will make the same arc as you shared in the image link. Here, the percentage value can be any from 0 - 0.7;

import 'dart:math';

import 'package:flutter/material.dart';

class ArcIndicator extends CustomPainter{
        final Color bgColor;
        final Color lineColor;
        final double percent;
        final double width;
       ArcIndicator({
        this.bgColor,
        this.lineColor,
        this.percent,
        this.width
       });
       @override
       void paint(Canvas canvas, Size size) {
         Paint bgLine  = Paint()..color = bgColor
         ..strokeCap=StrokeCap.round
         ..strokeWidth = width
         ..style = PaintingStyle.stroke;
        Paint completedLine  = Paint()..color = lineColor
         ..strokeCap=StrokeCap.round
         ..strokeWidth = width
         ..style = PaintingStyle.stroke;

    Offset offset = Offset(size.width/2, size.height /2);
    double radius = min(size.width /2 ,size.height/2);
    canvas.drawArc(
        Rect.fromCircle(center: offset,radius: radius),
        2.5,
        2*pi*0.7,
        false,
        bgLine);
      double sweepAngle = 2*pi*percent;
      canvas.drawArc(
      Rect.fromCircle(center: offset,radius: radius),
      2.5,
      sweepAngle,
      false,
       completedLine);
      }

     @override
     bool shouldRepaint(CustomPainter oldDelegate) {
      return true;
     }

     }

Explanation: You can use two circularProgressIndicator Widget and one Text Widget inside an stack and provide the value to circularProgressIndicator to make it arc like progress bar.

This is from my project repo.

import 'package:flutter/material.dart';

class DownloadProgressIndicator extends StatelessWidget {

  DownloadProgressIndicator({
    this.color =Colors.blue,
    this.backgroundColor = Colors.black12,
    this.content,
    this.value,
    this.strokeWidth = 4.0,
  });

  final Color color;
  final Color backgroundColor;
  final Widget content;
  final double value;
  final double strokeWidth;

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: <Widget>[
        backgroundColor != null ? 
        CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(backgroundColor),
          value: 1,
          strokeWidth: strokeWidth,
        ): Container(),
        CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(color),
          value: value,
          strokeWidth: strokeWidth,
        ),
        content != null ? 
        Center(
          child: content,
        ) : Container(),
      ],
    );
  }
}

Pass the required progress as value. If you need to start the arc at different angle you can put this widget inside a Transform.rotate widget. Not exact but it will solve your problem.

Update: after observing your image You can pass some value to background circularProgressIndicator and rotate it to start from bottom. Let's say your background arc goes from 0 to 75. Now you need to normalise your progress value (eg. value * 75 /100) so it falls feet between 0 to 75 for your foreground progress indicator. rotate foreground arc as well.