如何在Flutter中制作ArcProgress Bar？

Question

我正在尝试在 Flutter 中制作弧形进度条。下图是我想要实现的目标

CircularProgressIndicator我只能在颤振的小部件目录中找到。

我厌倦了以下包 https://pub.dartlang.org/packages/percent_indicator

但没能实现弧形进度条。

任何帮助，将不胜感激

Answer 1

CircularPercentIndicator你可以这样使用：

         @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%"),
            ),
          ),
        );
      }

yourPercentage只需根据您的需要更改变量即可。

更新（16/05/2019）

我更新了我的代码（尚未在 pub 上发布），但您可以这样使用：

在 pubspec.yaml 中

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

代码

    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,
                ),