flutter_animation_progress_bar 1.0.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new55

Flutter Animation Progress Bar #

This colorful Flutter widget package aims to show an animation progress bar in reactive style. It also supports both vertical and horizontal bar.

Flutter Create Contest #

This package is also a submission to Flutter Create contest. The basic rule of this contest is to measure the total Dart file size less or equal 5KB.

After unzipping the compressed file, run following command to update dependencies:

flutter packages get

To evaluate the total size of all Dart files:

find . -name "*.dart" ! -name "*test*"  | xargs cat | wc -c

To evaluate only the package Dart code:

find . -name "*.dart" ! -name "*test*" ! -path "*example*"  | xargs cat | wc -c

To run simple example app with a total size of dart code less or equal 5KB:

cd example
flutter clean
flutter run

Hot restart app with "R" to replay the animation

To run the full example app:

cd example
mv lib/main.dart tmp && mv lib/main.dart.bk lib/main.dart && mv tmp lib/main.dart.bk
flutter clean
flutter run

Using built-in float action buttons to change value and see the effect

Getting Started #

In order to use this package, do import

import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';

Basic implementation can be done like below code:

import 'package:flutter/widgets.dart';
import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';

void main() {
  runApp(
    Center(
        child: FAProgressBar(
      currentValue: 80,
      displayText: '%',
    )),
  );
}

Example App #

You can find more examples from Example App

API #

In this table, you can find all attributes provided by this package:

AttributeDefault valueDescription
currentValue0Set the current value for progress bar. This value should be in stateful so that whenever setState() has been called, the progress bar will trigger an animation from latest currentValue to new currentValue
maxValue100Max value to be displayed as progress bar.
Current value can be greater than max value
size30The bar height if direction in Axis.horizontal.
The bar width if direction in Axis.vertical
animatedDurationconst Duration(milliseconds: 300)Set the duration for an animation cycle
directionAxis.horizontalThe bar can be in Axis.horizontal or Axis.vertical direction
verticalDirectionVerticalDirection.downWith vertical direction, the bar can be VerticalDirection.up or VerticalDirection.down direction
borderRadius8Set the bar border radius
backgroundColorconst Color(0x00FFFFFF)Set the bar background color
progressColorconst Color(0xFFFA7268)Set the bar progressing color
changeColorValuenullSet a value that progress color should be changed to
[0---blue----[70]-red-100]
changeProgressColorconst Color(0xFF5F4B8B)Color that progressing color will be changed to, whenever currentValue greater than changeColorValue
displayTextnullText to display belonging with currentValue.
Examples:
% -> 20%
°F -> 80°F

Objects #

class FAProgressBar {

  final int currentValue;
  final int maxValue;
  final double size;
  final Duration animatedDuration;
  final Axis direction;
  final VerticalDirection verticalDirection;
  final double borderRadius;
  final Color backgroundColor;
  final Color progressColor;
  final int changeColorValue;
  final Color changeProgressColor;
  final String displayText;
}

Feedback #

Feel free to leave any feedback for helping support this package 🍻 

[0.0.2] - 2019-03-15

  • Wrap up all codes with documents

[0.0.1] - 2019-03-11

  • Initial raw package

example/README.md

Example of Flutter Animation Progress Bar #

This is the example app of Flutter Animation Progress Bar package.

Getting Started #

In order to run this example, make sure there is a connected device or a running simulator on your machine. Run below command lines:

Run following command to update dependencies:

flutter packages get

To run simple example app with a total size of dart code less or equal 5KB:

cd example
flutter clean
flutter run

Hot restart app with "R" to replay the animation

To run the full example app:

cd example
mv lib/main.dart tmp && mv lib/main.dart.bk lib/main.dart && mv tmp lib/main.dart.bk
flutter clean
flutter run

Using built-in float action buttons to change value and see the effect

Feedback #

Feel free to leave any feedback for helping support this package 🍻 

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_animation_progress_bar: ^1.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_animation_progress_bar/flutter_animation_progress_bar.dart';
  
Version Uploaded Documentation Archive
1.0.0 Apr 8, 2019 Go to the documentation of flutter_animation_progress_bar 1.0.0 Download flutter_animation_progress_bar 1.0.0 archive
0.0.2 Apr 7, 2019 Go to the documentation of flutter_animation_progress_bar 0.0.2 Download flutter_animation_progress_bar 0.0.2 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
11
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
55
Learn more about scoring.

We analyzed this package on Apr 16, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test