circular_custom_loader 1.0.3

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

2. Add this import to your dart file:

import 'package:circular_custom_loader/circular_custom_loader.dart';

3. 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: '%'
)

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

2. Add this import to your dart file:

import 'package:circular_custom_loader/circular_custom_loader.dart';

3. 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: '%'
)

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