circular_custom_loader 1.0.6

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

circular_custom_loader #

circular_custom_loader is a library for displaying the progress of tasks in your application. There are various cases, for instance say networking requests, or operations involving streams. This package can be used to engage the user until data gets displayed.

The most commonly-used class is the package's CircularLoader. It takes in different parameters, some mandatory, some optional and using these parameters you can display this widget like any other widget.

You can even style the texts and the progress value itself, using the coveredPercentStyle and circleHeaderStyle. Sorry to keep to waiting!!!!

Below is the sample description of how to get started with this package.

Example

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.6
  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 #

Example

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.6
  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.6] - 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 is a library for displaying the progress of tasks in your application. There are various cases, for instance say networking requests, or operations involving streams. This package can be used to engage the user until data gets displayed.

The most commonly-used class is the package's CircularLoader. It takes in different parameters, some mandatory, some optional and using these parameters you can display this widget like any other widget.

You can even style the texts and the progress value itself, using the coveredPercentStyle and circleHeaderStyle. Sorry to keep to waiting!!!!

Below is the sample description of how to get started with this package.

Example

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader: 1.0.6
  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 #

Example

How to use #

  1. Add this to your package's pubspec.yaml file:
dependencies:
  circular_custom_loader:
  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.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub 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]
42
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
55
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

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

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Maintenance issues and suggestions

Homepage URL doesn't exist. (-20 points)

At the time of the analysis the homepage field https://pslove.com/app/ was unreachable.

Support latest dependencies. (-5 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency.

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