percentages_with_animation 1.0.2 percentages_with_animation: ^1.0.2 copied to clipboard
This package provide you percentages with custom widgets and animation such as linear, circular, circle and gradient circle percentages.
Features #
This package provide you percentages with custom widgets and animation such as linear, circular, circle and gradient circle percentages.
Getting started #
Version Minimum Flutter SDK: 3.0.0
Tested Versioning:
Flutter SDK version: 3.24.3
Dart Version: 3.5.3
Usage #
Linear Percentage #
Parameters | Description |
---|---|
currentPercentage |
This parameter is required and it's the current percentage value, (currentPercentage <= maxPercentage & currentPercentage >= 0.0) |
maxPercentage |
This parameter is required and it's the maximum percentage value, (maxPercentage >= currentPercentage) |
backgroundHeight |
This parameter is required and it's the background height behind of the percentage view |
percentageHeight |
This parameter is required and it's the percentage height |
duration |
This parameter is the duration for the animation with default value 1000 ms |
backgroundDecoration |
This parameter is the background decoration behind of the percentage view |
percentageDecoration |
This parameter is the percentage decoration |
backgroundColor |
This parameter is the background color behind of the percentage view with default value black26 |
percentageColor |
This parameter is the percentage color with default value black |
leftRightText |
This parameter is the enum value for the left and right text (min and max value - label) - accepted value leftOnly , rightOnly , both , none , default value: none |
leftTextStyle |
This parameter is the text style for the left text |
rightTextStyle |
This parameter is the text style for the right text |
leftTextRightPadding |
This parameter is the right text padding from percentage view with default value: 5 |
rightTextRightPadding |
This parameter is the left text padding from percentage view with default value: 5 |
showPercentageOnPercentageView |
This parameter is the option to show the percentage value on percentage view with default value: false |
percentageOnPercentageViewTextStyle |
This parameter is the text style for percentage on percentage view |
onCurrentValue |
This parameter is the call back to get the current percentage value during the animation (optional) |
Circular Percentage #
Parameters | Description |
---|---|
currentPercentage |
This parameter is required and it's the current percentage value, (currentPercentage <= maxPercentage & currentPercentage >= 0.0) |
maxPercentage |
This parameter is required and it's the maximum percentage value, (maxPercentage >= currentPercentage) |
size |
This parameter is the circle size for the percentage with default size 100 |
duration |
This parameter is the duration for the animation with default value 1000 ms |
percentageStrokeWidth |
This parameter is the stroke width for the percentage gradient circle |
backgroundStrokeWidth |
This parameter is the stroke width for the background gradient circle |
percentageColor |
This parameter is the bottom color for the percentage |
backgroundColor |
This parameter is the circle color behind of the percentage |
centerText |
This parameter is a custom center text with default value null (if it null then show the percentage value) |
centerTextStyle |
This parameter is the text style of the label for the percentage text |
onCurrentValue |
This parameter is the call back to get the current percentage value during the animation (optional) |
Circle Percentage #
Parameters | Description |
---|---|
currentPercentage |
This parameter is required and it's the current percentage value, (currentPercentage <= maxPercentage & currentPercentage >= 0.0) |
maxPercentage |
This parameter is required and it's the maximum percentage value, (maxPercentage >= currentPercentage) |
size |
This parameter is the circle size for the percentage with default size 100 |
duration |
This parameter is the duration for the animation with default value 1000 ms |
percentageStrokeWidth |
This parameter is the stroke width for the background gradient circle |
backgroundStrokeWidth |
background stroke width behind of the percentage view |
percentageColor |
This parameter is the bottom color for the percentage |
backgroundColor |
This parameter is the circle color behind of the percentage |
centerText |
This parameter is a custom center text with default value null (if it null then show the percentage value) |
centerTextStyle |
This parameter is the text style of the label for the percentage text |
onCurrentValue |
This parameter is the call back to get the current percentage value during the animation (optional) |
Gradient Circle Percentage #
Parameters | Description |
---|---|
currentPercentage |
This parameter is required and it's the current percentage value, (currentPercentage <= maxPercentage & currentPercentage >= 0.0) |
maxPercentage |
This parameter is required and it's the maximum percentage value, (maxPercentage >= currentPercentage) |
size |
This parameter is the circle size for the percentage with default size 100 |
duration |
This parameter is the duration for the animation with default value 1000 ms |
percentageStrokeWidth |
This parameter is the stroke width for the percentage gradient circle |
backgroundStrokeWidth |
This parameter is the stroke width for the background gradient circle |
bottomColor |
This parameter is the bottom color for the percentage |
topColor |
This parameter is the remaining color for the percentage circle |
backgroundColor |
This parameter is the circle color behind of the percentage |
centerText |
This parameter is a custom center text with default value null (if it null then show the percentage value) |
centerTextStyle |
This parameter is the text style of the label for the percentage text |
onCurrentValue |
This parameter is the call back to get the current percentage value during the animation (optional) |
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:percentages_with_animation/percentages_with_animation.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Percentage With Animation Example',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 55,
),
const Text(
"Linear Percentage",
style: TextStyle(color: Colors.black, fontSize: 21),
),
const SizedBox(
height: 15,
),
Padding(
padding: const EdgeInsets.only(right: 59.0, left: 59),
child: LinearPercentage(
currentPercentage: 70,
maxPercentage: 100,
backgroundHeight: 20,
percentageHeight: 20,
leftRightText: LeftRightText.both,
showPercentageOnPercentageView: true,
percentageOnPercentageViewTextStyle:
const TextStyle(color: Colors.white),
backgroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black38,
),
percentageDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.black,
),
onCurrentValue: (currentValue) {
if (kDebugMode) {
print("LinearPercentage currentValue: $currentValue");
}
},
),
),
const SizedBox(
height: 35,
),
const Text(
"Circular Percentage",
style: TextStyle(color: Colors.black, fontSize: 21),
),
const SizedBox(
height: 15,
),
CircularPercentage(
currentPercentage: 50,
maxPercentage: 100,
size: 150,
duration: 2000,
percentageStrokeWidth: 10,
percentageColor: Colors.blue,
backgroundColor: Colors.black,
backgroundStrokeWidth: 2,
centerTextStyle: const TextStyle(
color: Colors.red,
fontSize: 21,
),
onCurrentValue: (currentValue) {
if (kDebugMode) {
print("CircularPercentage currentValue: $currentValue");
}
},
),
const SizedBox(
height: 35,
),
const Text(
"Circle Percentage",
style: TextStyle(color: Colors.black, fontSize: 21),
),
const SizedBox(
height: 15,
),
CirclePercentage(
currentPercentage: 70,
maxPercentage: 100,
size: 150,
duration: 2000,
percentageColor: Colors.green,
backgroundStrokeWidth: 2,
centerTextStyle: const TextStyle(
color: Colors.red,
fontSize: 21,
),
onCurrentValue: (currentValue) {
if (kDebugMode) {
print("CirclePercentage currentValue: $currentValue");
}
},
),
const SizedBox(
height: 35,
),
const Text(
"Gradient Circle Percentage",
style: TextStyle(color: Colors.black, fontSize: 21),
),
const SizedBox(
height: 15,
),
GradientCirclePercentage(
currentPercentage: 70,
maxPercentage: 100,
size: 150,
duration: 2000,
percentageStrokeWidth: 10,
bottomColor: Colors.green,
backgroundStrokeWidth: 2,
centerTextStyle: const TextStyle(
color: Colors.red,
fontSize: 21,
),
onCurrentValue: (currentValue) {
if (kDebugMode) {
print("GradientCirclePercentage currentValue: $currentValue");
}
},
),
],
),
);
}
}
Additional information #
Thank you for using my package, any feedback is welcome. You can report any bug, ask a question on package GitHub repository. https://github.com/NicosNicolaou16/percentages_with_animation/issues