如何在Flutter中制作ArcProgress Bar？ [英] How to make ArcProgress Bar in Flutter?

问题描述

我正在尝试在Flutter中制作Arc Progress栏。
下图是我要实现的目标

I am trying to make Arc Progress bar in Flutter. Following image is what I want to achieve

我只能在窗口小部件目录中找到 CircularProgressIndicator 来振作。

I am only able to find CircularProgressIndicator in the widget catalog for flutter.

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

，但无法达到圆弧进度条。

but was not able to achieve the arc progress bar.

任何帮助将不胜感激

推荐答案

您可以像这样使用 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 根据您的需要可变。

Just change the yourPercentage variable according to your needs.

更新（16/05/2019）

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

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

在pubspec.yaml中

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

这篇关于如何在Flutter中制作ArcProgress Bar？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！