smart_progress_circle 0.0.4 copy "smart_progress_circle: ^0.0.4" to clipboard
smart_progress_circle: ^0.0.4 copied to clipboard

SmartProgressCircle is a customizable Flutter widget for displaying dynamic circular progress. Ideal for real-time updates in apps like fitness trackers and dashboards.

Circular Progress Bar Flutter Plugin #

Overview #

The Circular Progress Bar Flutter Plugin is a customizable widget that displays a circular progress indicator with interactive features. Users can drag to adjust the value, tap to enter a new value, and customize various aspects of the widget, including colors, sizes, and styles. This plugin is ideal for applications that require a visual representation of progress or completion metrics.

Features #

  • Customizable Parameters: Define colors for the background, progress, marks, borders, and buttons.
  • Interactive Value Adjustment: Users can adjust the progress by dragging around the circular indicator.
  • Input Dialog: Tap the progress bar to open a dialog for manual value input.
  • Responsive Design: Automatically adjusts to different screen sizes and orientations.
  • Default Styling: Comes with sensible defaults that can be easily overridden.

Screenshot 2024-10-23 173828

Installation #

To use the Circular Progress Bar plugin in your Flutter project, follow these steps:

  1. Add the dependency to your pubspec.yaml file:

    dependencies:
      flutter:
        sdk: flutter
      circular_progress_bar: ^1.0.0 # Replace with the latest version
    
  2. Run the following command to install the package:

    flutter pub get
    

Usage #

To use the CircularProgressBar widget in your Flutter application, import the package and create an instance of the widget with your desired parameters.

Example #

import 'package:flutter/material.dart';
import 'package:circular_progress_bar/circular_progress_bar.dart'; // Adjust the import according to your package structure

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Circular Progress Bar Example')),
        body: Center(
          child: CircularProgressBar(
            minValue: 0,
            maxValue: 100,
            initialValue: 50,
            icon: Icon(Icons.check, size: 50),
            calculationCriteria: 'Progress',
            backgroundColor: Colors.blueGrey,
            progressColor: Colors.green,
            markColor: Colors.orange,
            borderColor: Colors.black,
            dialogBackgroundColor: Colors.white,
            dialogTextColor: Colors.black,
            buttonColor: Colors.green,
            buttonTextColor: Colors.white,
            cancelButtonColor: Colors.red,
            cancelButtonTextColor: Colors.white, 
            onChanged: (value) {
             print("Current value is: $value");
            }
          ),
        ),
      ),
    );
  }
}

Parameters #

Parameter Type Description
minValue double The minimum value of the progress bar.
maxValue double The maximum value of the progress bar.
initialValue double The initial value displayed on the progress bar.
icon Widget An icon widget displayed at the center of the progress bar.
calculationCriteria String A string that describes what the progress bar represents.
size double (optional) The size of the circular progress bar. Defaults to 250.0.
backgroundColor Color (optional) The background color of the progress bar. Defaults to light or dark theme color.
progressColor Color (optional) The color of the progress arc. Defaults to a gradient of red.
markColor Color (optional) The color of the marks around the progress bar. Defaults to light grey.
borderColor Color (optional) The color of the border of the progress bar. Defaults to light or dark theme color.
dialogBackgroundColor Color (optional) The background color of the input dialog. Defaults to the scaffold background color.
dialogTextColor Color (optional) The text color in the input dialog. Defaults to black.
buttonColor Color (optional) The color of the OK button in the dialog. Defaults to red.
buttonTextColor Color (optional) The text color of the OK button. Defaults to white.
cancelButtonColor Color (optional) The color of the Cancel button in the dialog. Defaults to white.
cancelButtonTextColor Color (optional) The text color of the Cancel button. Defaults to red.
onChanged void Function(double)? (optional) This is a callback function that allows users to define custom behavior that should occur when the value changes.

Customization #

You can customize the CircularProgressBar by providing your own colors and sizes. If any parameter is not provided, the widget will use its default values.

Contribution #

If you would like to contribute to this plugin, please feel free to submit a pull request or open an issue on the repository. Contributions, suggestions, and feedback are always welcome!

License #

This project is licensed under the MIT License. See the LICENSE file for more details.

Support #

For any questions or support, please open an issue in the repository or contact the author.


This README provides a comprehensive overview of the Circular Progress Bar Flutter Plugin, including installation instructions, usage examples, and customization options. Adjust the version number and import paths as necessary for your project structure.

1
likes
150
points
25
downloads

Publisher

unverified uploader

Weekly Downloads

SmartProgressCircle is a customizable Flutter widget for displaying dynamic circular progress. Ideal for real-time updates in apps like fitness trackers and dashboards.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_web_plugins, plugin_platform_interface

More

Packages that depend on smart_progress_circle