Skip to content

Latest commit

 

History

History
266 lines (241 loc) · 15.9 KB

README.md

File metadata and controls

266 lines (241 loc) · 15.9 KB
Raw

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