如何在Flutter中制作ArcProgress Bar？

Question

如何在Flutter中制作ArcProgress Bar？

dartflutter

3

我正在尝试在Flutter中制作弧形进度条。以下图片是我想要实现的效果

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

我尝试了以下软件包https://pub.dartlang.org/packages/percent_indicator，但未能实现弧形进度条。

任何帮助都将不胜感激。

- user10241787

4个回答

3

您可以使用Flutter CustomPaint类来实现这一点。像下面这样做可以制作出与您在图片链接中分享的相同的弧形。在这里，百分比值可以是从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;
     }

     }

- Divyam Makar

哇，这对我的使用情况也完美地起作用了。谢谢。 - Kelvin Omereshone

我想要的唯一更改是，在100％时，我不希望拱形完成。类似于这样的东西https://cdn.discordapp.com/attachments/753597538447130624/846331691978326016/Screenshot_2021-05-24_at_10.png - Kelvin Omereshone

1

说明：您可以在 stack 中使用两个 circularProgressIndicator Widget 和一个 Text Widget，并向 circularProgressIndicator 提供值，使其弧形进度条。

这来自我的项目存储库。

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(),
      ],
    );
  }
}

将所需的进度作为“value”传递。如果您需要在不同的角度开始弧形，则可以将此小部件放在“Transform.rotate”小部件中。不是很准确，但可以解决您的问题。

更新：观察您的图像后，您可以将一些值传递给背景的“circularProgressIndicator”，并将其旋转以从底部开始。假设您的背景弧从0到75。现在，您需要对进度值进行归一化（例如，value * 75/100），使其在0到75之间的前景进度指示器中。也要旋转前景弧。

- Natwar Singh

谢谢您的回答，但它并不完全符合问题的要求。他/她想要一个类似于这样的输出 i.stack.imgur.com/mLjUe.png - BraveEvidence

是的，我知道并已经提到了。它非常接近他/她所需的，只需要进行一些修改来旋转并限制进度到一定程度。 - Natwar Singh

这是我所说的小修改。 - Natwar Singh

0

你可以使用这个新的包来创建一个弧形进度条。

https://pub.dev/packages/arc_progress_bar_new

你就这样称呼它：

  ArcProgressBar(
    percentage: _progressPercentage,
    arcThickness: 5,
    innerPadding: 16,
    animateFromLastPercent: true,
    handleSize: 10,
    backgroundColor: Colors.black12,
    foregroundColor: Colors.black
    )

- Frankline Sable

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- diegoveloper · Accepted Answer

您可以像这样使用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变量即可。

更新（2019年5月16日）

我已更新代码（尚未发布到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,
                ),