simple_circular_progress_bar
v1.0.2Open source Flutter package, simple circular progress indicator.
Package archive: https://pubdev.letsnova.ru/api/archives/simple_circular_progress_bar/1.0.2.tar.gz
dart pub add simple_circular_progress_barReadme
Simple circular progress bar
Open source Flutter package, simple circular progress bar.
Getting Started
Installing
Add in pubspec.yaml:
dependencies:
flutter:
sdk: flutter
simple_circular_progress_bar: ^1.0.2
Now in your code, you can import:
import 'package:simple_circular_progress_bar/simple_circular_progress_bar.dart';
Basic examples
See the full example here. Most of the examples are in the rows_in_progress_bar_example folder.
Example numbers correspond to their numbers in the code. To quickly find examples in the repository, look in the code: 'EXAMPLE CODE'.
Colors
Dart code
// Example 1
SimpleCircularProgressBar(
progressColors: const [Colors.cyan],
)
// Example 2
SimpleCircularProgressBar(
progressColors: const [Colors.cyan, Colors.purple],
),
// Example 3
SimpleCircularProgressBar(
progressColors: const [
Colors.cyan,
Colors.green,
Colors.amberAccent,
Colors.redAccent,
Colors.purpleAccent
],
backColor: Colors.blueGrey,
),
Start angle
Dart code
// Example 4
SimpleCircularProgressBar(
startAngle: 45,
),
// Example 5
SimpleCircularProgressBar(
startAngle: 90,
),
// Example 6
SimpleCircularProgressBar(
startAngle: -180,
),
Thickness of the lines
Dart code
// Example 7
SimpleCircularProgressBar(
size: 80,
progressStrokeWidth: 25,
backStrokeWidth: 25,
),
// Example 8
SimpleCircularProgressBar(
progressStrokeWidth: 20,
backStrokeWidth: 10,
),
// Example 9
SimpleCircularProgressBar(
backStrokeWidth: 0,
),
Merge mode
Dart code
// Example 10
SimpleCircularProgressBar(
progressColors: const [Colors.cyan],
mergeMode: true,
),
// Example 11
SimpleCircularProgressBar(
progressColors: const [Colors.cyan],
fullProgressColor: Colors.deepOrangeAccent,
mergeMode: true,
),
// Example 12
SimpleCircularProgressBar(
progressColors: const [Colors.cyan, Colors.purpleAccent],
mergeMode: true,
),
Animation time
If you don't need animation, set animationDuration = 0.
Dart code
// Example 13
SimpleCircularProgressBar(
mergeMode: true,
animationDuration: 1,
),
// Example 14
SimpleCircularProgressBar(
mergeMode: true,
animationDuration: 3,
),
// Example 15
SimpleCircularProgressBar(
mergeMode: true,
animationDuration: 6,
),
Text
Dart code
// Example 16
SimpleCircularProgressBar(
mergeMode: true,
onGetText: (double value) {
return Text('${value.toInt()}%');
},
),
// Example 17
SimpleCircularProgressBar(
valueNotifier: valueNotifier,
mergeMode: true,
onGetText: (double value) {
return Text(
'${value.toInt()}',
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.white,
),
);
},
),
// Example 18
SimpleCircularProgressBar(
valueNotifier: valueNotifier,
mergeMode: true,
onGetText: (double value) {
TextStyle centerTextStyle = TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.greenAccent.withOpacity(value * 0.01),
);
return Text(
'${value.toInt()}',
style: centerTextStyle,
);
},
),
Value Notifier Example
You can read about how ValueNotifier works here.
The source code of the example can be found here.
Parameters description
| Parameter | Default | Description |
|---|---|---|
| size double |
100 | Widget size. |
| maxValue double |
100 | The maximum value of the progress bar. The values will vary from 0 to [maxValue]. |
| startAngle double |
0 | The angle from which the countdown of progress begins. |
| progressStrokeWidth double |
15 | Thickness of the progress line. |
| backStrokeWidth double |
15 | Line thickness of the background circle. If you don't need a background circle, set this parameter to 0. |
| progressColors List |
Progress bar can be either with or without a gradient. For a gradient, specify more than one color in the [progressColors] field and if a gradient is not needed specify only one color. | |
| fullProgressColor Color |
The color of the circle at 100% value. It only works when [mergeMode] equal to true. | |
| backColor Color |
The color of the background circle. | |
| animationDuration int |
6 | Animation duration in seconds. If you don't need animation, set this parameter to 0. |
| mergeMode bool |
false | When this mode is enabled the progress bar with a 100% value forms a full circle with [fullProgressColor]. If no [fullProgressColor] is specified, the last color from [progressColors] is taken. |
| valueNotifier ValueNotifier |
The object designed to update the value of the progress bar. By default, creates a ValueNotifier with the maximum value. | |
| onGetText Text Function(double) |
Callback to generate a new Text widget located in the center of the progress bar. The callback input is the current value of the progress bar. |
YouTube video
You can see how the application works from the example in this video.
Changelog
[1.0.2] - 06.07.2022
- Added widget tests
[1.0.1] - 14.05.2022
- Added support for all platforms.
- Code formatted.
- Additional information was added to the README.md.
- Added YouTube video link.
[1.0.0] - 12.05.2022
- Initial release.