circular_custom_loader 1.0.6 circular_custom_loader: ^1.0.6 copied to clipboard
Show the loading progress in a circle.
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.
How to use #
- Add this to your package's pubspec.yaml file:
dependencies:
circular_custom_loader: 1.0.6
- Add this import to your dart file:
import 'package:circular_custom_loader/circular_custom_loader.dart';
- 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: '%'
)
- 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 #
- Add this to your package's pubspec.yaml file:
dependencies:
circular_custom_loader: 1.0.6
- Add this import to your dart file:
import 'package:circular_custom_loader/circular_custom_loader.dart';
- 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: '%'
)
- 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.