circular_custom_loader 1.0.4

Show the loading progress in a circle.

circular_custom_loader

Circular custom loader for showing progress.

How to use

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

dependencies:
  circular_custom_loader: 1.0.4

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

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.