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.

Libraries

circular_custom_loader

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]