The package provides a beautiful and simple to use widget that renders a circle with its progress arc. You might need it to show your users some progress or activity in your app.

Features

The widget is quite simple in use and customizable so you may play with it to choose the appropriate configuration. Here are some basic states which you can combine to get the necessary customization:

Use any icon for each of the side

Round your arc's head or tail

Set any color you want

Set any icon to any part

Change the width

Set some message and change the width

Usage

To use the basic state just pass the required params:

ProgressCircle(
    boxSize: 300,
    completed: 7,
    total: 8,
),

You may round the head or tail:

ProgressCircle(
    boxSize: 300,
    completed: 7,
    total: 8,
    isRoundedHead: true,
    isRoundedTail: true,
),

// Or use this constructor.
ProgressCircle.rounded(
    boxSize: 300,
    completed: 7,
    total: 8,
),

If you want to set some icon:

ProgressCircle(
    boxSize: 300,
    completed: 7,
    total: 8,
    headIcon: Icons.star,
    tailIcon: Icons.star_border,
    headIconColor: Colors.white,
    tailIconColor: Colors.black,
),

Set your message to the center:

ProgressCircle(
    boxSize: 300,
    completed: 7,
    total: 8,
    centerMessage: 'You are beautiful!',
    centerMessageStyle: TextStyle(
        color: Colors.blue,
        fontSize: 14,
    ),
),

Play with arc with and change the color:

ProgressCircle(
    boxSize: 300,
    completed: 7,
    total: 8,
    arcWidth: 45,
    progressArcColor: Colors.orange,
    innerColor: Colors.redAccent,
),

Libraries

progress_circle