CODEWITHSUNDEEP
dartflutter
user10241787
user10241787

Reputation:

How to make ArcProgress Bar in Flutter?

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

Arc Progress Bar

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

I tired the following package https://pub.dartlang.org/packages/percent_indicator

but was not able to achieve the arc progress bar.

Any help would be appreciated

Upvotes: 3

Views: 4594

Answers (4)

Frankline Sable
Frankline Sable

Reputation: 366

You can create a Arc shape progress bar by using this new package:

https://pub.dev/packages/arc_progress_bar_new

You just call it like this:

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

Upvotes: 0

Divyam Makar
Divyam Makar

Reputation: 106

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

     }

Upvotes: 3

diegoveloper
diegoveloper

Reputation: 103541

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

Upvotes: 7

Natwar Singh
Natwar Singh

Reputation: 2273

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.

Upvotes: 1

Related Questions