radial_progress

Description:

radial progress

Radial Progress #

Use radial_progress package to display pie charts with dynamic progress percentage by enabling animation
Where is it used? #

In applications that display currency and gold rates to the user
In sports applications that calculate the length of a period of time
In applications that provide diet to the user
In educational applications in order to display the student's academic progress
In store applications in the shopping cart section
...

📈 📉 🎛 📱
Install Package #
Add the following line to your pubspec.yaml under dependencies:
dependencies:
radial_progress: ^0.1.0
copied to clipboard
Then run:
flutter pub get
copied to clipboard
Usage #
Import it
import 'package:radial_progress/radial_progress.dart';
copied to clipboard
Now in your flutter code, you can use:

The percent should be between 0.0 and 1.0.
If you don't specify the diameter, it defaults to 80.
By default, the progressLineWidth is 10. You can change it, but the maximum limit is up to one third of the diameter.
Animation is enabled by default. You can set a duration for it or disable it.
Feature progressLineColors is nullable. For the color of the progress line,
you can consider a list of colors. Depending on the percent feature, this line can take one of the colors from the list.
If the progress rate is 0%, the color in zeroth index will be taken,
and if the progress percentage is 100%, the color of the last index will be taken.
The startAngle attribute specifies the starting point or the angle of drawing the progress line. That is a enum.





RadialProgressWidget(
percent: 0.35,
diameter: 180,
bgLineColor: Colors.cyan.withOpacity(0.2),
progressLineWidth: 16,
startAngle: StartAngle.top,
centerChild: const Text(
'\$ 547.52 - \$ 800.0',
maxLines: 1,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
);
copied to clipboard




RadialProgressWidget(
percent: 0.7,
diameter: 180,
bgLineColor: Colors.grey.withOpacity(0.2),
progressLineWidth: 24,
startAngle: StartAngle.top,
progressLineColors: const [
Colors.green,
],
centerChild: const Text(
'70 %',
maxLines: 1,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
);
copied to clipboard
by Shervin Hassanzadeh #
Contact me at