circular_custom_loader 1.0.3 copy "circular_custom_loader: ^1.0.3" to clipboard
circular_custom_loader: ^1.0.3 copied to clipboard

outdated

Show the loading progress in a circle.

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.3
  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.3
  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.

13
likes
0
pub points
0%
popularity

Publisher

unverified uploader

Show the loading progress in a circle.

Homepage

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on circular_custom_loader