progress_line

Description:

progress line

Progress Line #

Getting started #
Use progress_line package to display linear charts/graph with dynamic progress percentage by enabling animation.
Where is it used? #

When you want to display the progress of the file download
In music or video players
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:
progress_line: ^0.1.0
copied to clipboard
Then run:
flutter pub get
copied to clipboard
Usage #
Import it
import 'package:progress_line/progress_line.dart';
copied to clipboard
Now in your flutter code, you can use:

The percent should be between 0.0 and 1.0.
Feature lineColors 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.
Animation is enabled by default. You can set a duration for it or disable it.




ProgressLineWidget(
percent: 0.9,
lineWidth: 20,
lineColors: const [
Colors.purple,
Colors.pink,
Colors.red,
Colors.orange,
Colors.yellow,
Colors.lightGreenAccent,
Colors.lightGreen,
Colors.green,
],
bgColor: Colors.grey.withOpacity(0.4),
innerPadding: const EdgeInsets.all(20),
outerPadding: const EdgeInsets.only(left: 16),
width: 180,
height: 100,
animationDuration: const Duration(seconds: 5),
start: Text(
(_value * 100).toStringAsFixed(0),
style: const TextStyle(
fontSize: 20,
color: Colors.black,
),
),
end: Text(
((1 - _value) * 100).toStringAsFixed(0),
style: const TextStyle(
fontSize: 20,
color: Colors.black,
),
),
callback: (value) {
setState(() {
_value = value;
});
},
)
copied to clipboard

By default :

Progress line Color is Colors.cyan
Background line Color is Colors.grey.shade200
Line width is 10
Width of Progress widget is 100




ProgressLineWidget(percent: 0.8)
copied to clipboard




ProgressLineWidget(
percent: 0.8,
lineWidth: 24,
width: 200,
lineColors: const [
Colors.green
],
)
copied to clipboard


You can set start and end widgets for the progress bar
For example, these widgets can be text that shows the progress percentage and the remaining percentage
You can create space between the progress bar and the widgets around it (start and end widgets) by using the innerPadding feature
You can also set the outerPadding attribute to space among the progress bar and other page widgets in widget tree




ProgressLineWidget.widgets(
percent: 0.4,
lineWidth: 20,
lineColors: const [Colors.orange],
bgColor: Colors.orange.withOpacity(0.2),
innerPadding: const EdgeInsets.symmetric(horizontal: 16),
outerPadding: const EdgeInsetsDirectional.only(start: 16),
width: 200,
start: Text(
(_value * 100).toStringAsFixed(0),
style: const TextStyle(
fontSize: 20,
color: Colors.black,
),
),
end: Text(
((1 - _value) * 100).toStringAsFixed(0),
style: const TextStyle(
fontSize: 20,
color: Colors.black,
),
),
callback: (value) {
setState(() {
_value = value;
});
},
)
copied to clipboard

by Shervin Hassanzadeh #
Contact me at