circular_custom_loader 1.0.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 51

circular_custom_loader #

Circular custom loader for showing progress.

Desc about this custom loader? #

Worried about showing the progress of your task in a circular manner?? Well, this loader helps to display that. The progress value is shown in the circle, along with the progress header., for instance, say loading. You can give the circle color and the progress color separately. This allows you to visualize the progress. You can set the circle width as per your requirement. The progress text and even the unit of progress are customizable. Lastly, you can customize the size of this widget by giving width and height params.

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.2
  1. Add this import to your dart file:
import 'package:circular_custom_loader/circular_custom_loader.dart';
  1. Just add CircularLoader wherever you want!
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
)
  1. You can customize the parameters too. For instance, change the style of coveredPercent using coveredPercentStyle
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        coveredPercentStyle: Theme.of(context).textTheme.title.copyWith(
              fontSize: 44.0,
              fontWeight: FontWeight.w900,
              letterSpacing: 1.0,
              color: Colors.black87),
)

Customize the circleHeader using circleHeaderStyle

 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        circleHeaderStyle: Theme.of(context).textTheme.title.copyWith(
                fontSize: 15.0,
                fontWeight: FontWeight.w500,
                color: Colors.grey,
              ),
)

Feel free to reach out, in case of any difficulties.

Getting Started #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Preview #

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.2
  1. Add this import to your dart file:
import 'package:circular_custom_loader/circular_custom_loader.dart';
  1. Just add CircularLoader wherever you want!
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
)
  1. You can customize the parameters too. For instance, change the style of coveredPercent using coveredPercentStyle
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        coveredPercentStyle: Theme.of(context).textTheme.title.copyWith(
              fontSize: 44.0,
              fontWeight: FontWeight.w900,
              letterSpacing: 1.0,
              color: Colors.black87),
)

Customize the circleHeader using circleHeaderStyle

 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        circleHeaderStyle: Theme.of(context).textTheme.title.copyWith(
                fontSize: 15.0,
                fontWeight: FontWeight.w500,
                color: Colors.grey,
              ),
)

Feel free to reach out, in case of any difficulties.

Getting Started #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

[1.0.2] - 19th January 2019

  • TODO: Describe initial release.
  • Display the progress in the circle
  • Customize the header of the progress text
  • Customize the complete circle color.
  • Customize the arc circle color.
  • Customize the circle arc width.
  • Style the progress value as well as progress header.
  • Show the unit of progress according to you. e.g %
  • Customize the whole size of widget, by giving width, height. (Recommended, both should be same)

example/README.md

circular_custom_loader #

Circular custom loader for showing progress.

Desc about this custom loader? #

Worried about showing the progress of your task in a circular manner?? Well, this loader helps to display that. The progress value is shown in the circle, along with the progress header., for instance, say loading. You can give the circle color and the progress color separately. This allows you to visualize the progress. You can set the circle width as per your requirement. The progress text and even the unit of progress are customizable. Lastly, you can customize the size of this widget by giving width and height params.

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.2
  1. Add this import to your dart file:
import 'package:circular_custom_loader/circular_custom_loader.dart';
  1. Just add CircularLoader wherever you want!
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
)
  1. You can customize the parameters too. For instance, change the style of coveredPercent using coveredPercentStyle
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        coveredPercentStyle: Theme.of(context).textTheme.title.copyWith(
              fontSize: 44.0,
              fontWeight: FontWeight.w900,
              letterSpacing: 1.0,
              color: Colors.black87),
)

Customize the circleHeader using circleHeaderStyle

 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        circleHeaderStyle: Theme.of(context).textTheme.title.copyWith(
                fontSize: 15.0,
                fontWeight: FontWeight.w500,
                color: Colors.grey,
              ),
)

Feel free to reach out, in case of any difficulties.

Getting Started #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Preview #

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.2
  1. Add this import to your dart file:
import 'package:circular_custom_loader/circular_custom_loader.dart';
  1. Just add CircularLoader wherever you want!
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
)
  1. You can customize the parameters too. For instance, change the style of coveredPercent using coveredPercentStyle
 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        coveredPercentStyle: Theme.of(context).textTheme.title.copyWith(
              fontSize: 44.0,
              fontWeight: FontWeight.w900,
              letterSpacing: 1.0,
              color: Colors.black87),
)

Customize the circleHeader using circleHeaderStyle

 CircularLoader(
        coveredPercent: 55,
        width: 150.0,
        height: 150.0,
        circleWidth: 12.0,
        circleColor: Colors.grey[300],
        coveredCircleColor: Colors.green,
        circleHeader: 'Progress..',
        unit: '%'
        circleHeaderStyle: Theme.of(context).textTheme.title.copyWith(
                fontSize: 15.0,
                fontWeight: FontWeight.w500,
                color: Colors.grey,
              ),
)

Feel free to reach out, in case of any difficulties.

Getting Started #

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  circular_custom_loader: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:circular_custom_loader/circular_custom_loader.dart';
  
Version Uploaded Documentation Archive
1.0.6 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.6 Download circular_custom_loader 1.0.6 archive
1.0.5 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.5 Download circular_custom_loader 1.0.5 archive
1.0.4 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.4 Download circular_custom_loader 1.0.4 archive
1.0.3 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.3 Download circular_custom_loader 1.0.3 archive
1.0.2 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.2 Download circular_custom_loader 1.0.2 archive
1.0.1 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.1 Download circular_custom_loader 1.0.1 archive
1.0.0 Jan 19, 2019 Go to the documentation of circular_custom_loader 1.0.0 Download circular_custom_loader 1.0.0 archive
0.0.1 Jan 19, 2019 Go to the documentation of circular_custom_loader 0.0.1 Download circular_custom_loader 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
11
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
51
Learn more about scoring.

We analyzed this package on Mar 6, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.3.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test