percentages_with_animation

Description:

percentages with animation

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.1
Dart Version: 3.5.1
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");
}
},
),
],
),
);
}
}


copied to clipboard
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