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.5
Dart Version: 3.5.4

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